rasti 3.0.1 → 4.0.0-alpha.1

package/dist/rasti.js

@@ -4,12 +4,52 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Rasti = {}));
 })(this, (function (exports) { 'use strict';
 
+    /**
+     * Validates that the listener is a function.
+     * @param {Function} listener The listener to validate.
+     * @throws {TypeError} If the listener is not a function.
+     * @module
+     * @private
+     */
+    function validateListener(listener) {
+        if (typeof listener !== 'function') {
+            throw new TypeError('Listener must be a function');
+        }
+    }
+
     /**
      * `Emitter` is a class that provides an easy way to implement the observer pattern 
      * in your applications.  
      * It can be extended to create new classes that have the ability to emit and bind custom named events.   
      * Emitter is used by `Model` and `View` classes, which inherit from it to implement 
      * event-driven functionality.
+     * 
+     * ## Inverse of Control Pattern
+     * 
+     * The Emitter class includes "inverse of control" methods (`listenTo`, `listenToOnce`, `stopListening`) 
+     * that allow an object to manage its own listening relationships. Instead of:
+     * 
+     * ```javascript
+     * // Traditional approach - harder to clean up
+     * otherObject.on('change', this.myHandler);
+     * otherObject.on('destroy', this.cleanup);
+     * // Later you need to remember to clean up each listener
+     * otherObject.off('change', this.myHandler);
+     * otherObject.off('destroy', this.cleanup);
+     * ```
+     * 
+     * You can use:
+     * 
+     * ```javascript
+     * // Inverse of control - easier cleanup
+     * this.listenTo(otherObject, 'change', this.myHandler);
+     * this.listenTo(otherObject, 'destroy', this.cleanup);
+     * // Later, clean up ALL listeners at once
+     * this.stopListening(); // Removes all listening relationships
+     * ```
+     * 
+     * This pattern is particularly useful for preventing memory leaks and simplifying cleanup
+     * in component lifecycle management.
      *
      * @module
      * @example
@@ -45,20 +85,20 @@
         /**
          * Adds event listener.
          * @param {string} type Type of the event (e.g. `change`).
-         * @param {function} listener Callback function to be called when the event is emitted.
+         * @param {Function} listener Callback function to be called when the event is emitted.
+         * @return {Function} A function to remove the listener.
          * @example
          * // Re render when model changes.
          * this.model.on('change', this.render.bind(this));
          */
         on(type, listener) {
             // Validate listener.
-            if (typeof listener !== 'function') {
-                throw new TypeError('Listener must be a function');
-            }
+            validateListener(listener);
             // Create listeners object if it doesn't exist.
             if (!this.listeners) this.listeners = {};
+            // Every type must have an array of listeners.
             if (!this.listeners[type]) this.listeners[type] = [];
-            // Add listener.
+            // Add listener to the array of listeners.
             this.listeners[type].push(listener);
             // Return a function to remove the listener.
             return () => this.off(type, listener);
@@ -67,33 +107,47 @@
         /**
          * Adds event listener that executes once.
          * @param {string} type Type of the event (e.g. `change`).
-         * @param {function} listener Callback function to be called when the event is emitted.
+         * @param {Function} listener Callback function to be called when the event is emitted.
+         * @return {Function} A function to remove the listener.
          * @example
          * // Log a message once when model changes.
          * this.model.once('change', () => console.log('This will happen once'));
          */
         once(type, listener) {
-            // If listener is a function, wrap it to remove it after it is called.
-            if (typeof listener === 'function') {
-                const self = this;
-                const originalListener = listener;
-
-                listener = function(...args) {
-                    originalListener(...args);
-                    self.off(type, listener);
-                };
-            }
+            // Validate listener.
+            validateListener(listener);
+            // Wrap listener to remove it after it is called.
+            const wrapper = (...args) => {
+                listener(...args);
+                this.off(type, wrapper);
+            };
             // Add listener.
-            return this.on(type, listener);
+            return this.on(type, wrapper);
         }
 
         /**
-         * Removes event listeners.
-         * @param {string} [type] Type of the event (e.g. `change`). If is not provided, it removes all listeners.
-         * @param {function} [listener] Callback function to be called when the event is emitted. If listener is not provided, it removes all listeners for specified type.
+         * Removes event listeners with flexible parameter combinations.
+         * @param {string} [type] Type of the event (e.g. `change`). If not provided, removes ALL listeners from this emitter.
+         * @param {Function} [listener] Specific callback function to remove. If not provided, removes all listeners for the specified type.
+         * 
+         * **Behavior based on parameters:**
+         * - `off()` - Removes ALL listeners from this emitter
+         * - `off(type)` - Removes all listeners for the specified event type
+         * - `off(type, listener)` - Removes the specific listener for the specified event type
+         * 
          * @example
-         * // Stop listening to changes.
+         * // Remove all listeners from this emitter
+         * this.model.off();
+         * 
+         * @example
+         * // Remove all 'change' event listeners
          * this.model.off('change');
+         * 
+         * @example
+         * // Remove specific listener for 'change' events
+         * const myListener = () => console.log('changed');
+         * this.model.on('change', myListener);
+         * this.model.off('change', myListener);
          */
         off(type, listener) {
             // No listeners.
@@ -120,33 +174,146 @@
         /**
          * Emits event of specified type. Listeners will receive specified arguments.
          * @param {string} type Type of the event (e.g. `change`).
-         * @param {any} [...args] Arguments to be passed to listener.
+         * @param {...any} [args] Optional arguments to be passed to listeners.
          * @example
-         * // Emit validation error event.
+         * // Emit validation error event with no arguments
          * this.emit('invalid');
+         * 
+         * @example
+         * // Emit change event with data
+         * this.emit('change', { field : 'name', value : 'John' });
          */
         emit(type, ...args) {
             // No listeners.
             if (!this.listeners || !this.listeners[type]) return;
             // Call listeners. Use `slice` to make a copy and prevent errors when 
             // removing listeners inside a listener.
-            this.listeners[type]
-                .slice()
-                .forEach(function(fn) {
-                    fn(...args);
-                });
+            this.listeners[type].slice().forEach(fn => fn(...args));
+        }
+
+        /**
+         * Listen to an event of another emitter (Inverse of Control pattern).
+         * 
+         * This method allows this object to manage its own listening relationships,
+         * making cleanup easier and preventing memory leaks. Instead of calling
+         * `otherEmitter.on()`, you call `this.listenTo(otherEmitter, ...)` which
+         * allows this object to track and clean up all its listeners at once.
+         * 
+         * @param {Emitter} emitter The emitter to listen to.
+         * @param {string} type The type of the event to listen to.
+         * @param {Function} listener The listener to call when the event is emitted.
+         * @return {Function} A function to stop listening to the event.
+         * 
+         * @example
+         * // Instead of: otherModel.on('change', this.render.bind(this));
+         * // Use: this.listenTo(otherModel, 'change', this.render.bind(this));
+         * // This way you can later call this.stopListening() to clean up all listeners
+         */
+        listenTo(emitter, type, listener) {
+            // Add listener to the emitter.
+            emitter.on(type, listener);
+            // Create listeningTo array if it doesn't exist.
+            if (!this.listeningTo) this.listeningTo = [];
+            // Add listener to the array of listeners.
+            this.listeningTo.push({ emitter, type, listener });
+            // Return a function to stop listening to the event.
+            return () => this.stopListening(emitter, type, listener);
+        }
+
+        /**
+         * Listen to an event of another emitter and remove the listener after it is called (Inverse of Control pattern).
+         * 
+         * Similar to `listenTo()` but automatically removes the listener after the first execution,
+         * like `once()` but with the inverse of control benefits for cleanup management.
+         * 
+         * @param {Emitter} emitter The emitter to listen to.
+         * @param {string} type The type of the event to listen to.
+         * @param {Function} listener The listener to call when the event is emitted.
+         * @return {Function} A function to stop listening to the event.
+         * 
+         * @example
+         * // Listen once to another emitter's initialization event
+         * this.listenToOnce(otherModel, 'initialized', () => {
+         *     console.log('Other model initialized');
+         * });
+         */
+        listenToOnce(emitter, type, listener) {
+            validateListener(listener);
+            // Wrap listener to remove it after it is called.
+            const wrapper = (...args) => {
+                listener(...args);
+                this.stopListening(emitter, type, wrapper);
+            };
+            // Add listener.
+            return this.listenTo(emitter, type, wrapper);
+        }
+
+        /**
+         * Stop listening to events from other emitters (Inverse of Control pattern).
+         * 
+         * This method provides flexible cleanup of listening relationships established with `listenTo()`.
+         * All parameters are optional, allowing different levels of cleanup granularity.
+         * 
+         * @param {Emitter} [emitter] The emitter to stop listening to. If not provided, stops listening to ALL emitters.
+         * @param {string} [type] The type of event to stop listening to. If not provided, stops listening to all event types from the specified emitter.
+         * @param {Function} [listener] The specific listener to remove. If not provided, removes all listeners for the specified event type from the specified emitter.
+         * 
+         * **Behavior based on parameters:**
+         * - `stopListening()` - Stops listening to ALL events from ALL emitters
+         * - `stopListening(emitter)` - Stops listening to all events from the specified emitter
+         * - `stopListening(emitter, type)` - Stops listening to the specified event type from the specified emitter
+         * - `stopListening(emitter, type, listener)` - Stops listening to the specific listener for the specific event from the specific emitter
+         * 
+         * @example
+         * // Stop listening to all events from all emitters (complete cleanup)
+         * this.stopListening();
+         * 
+         * @example
+         * // Stop listening to all events from a specific emitter
+         * this.stopListening(otherModel);
+         * 
+         * @example
+         * // Stop listening to 'change' events from a specific emitter
+         * this.stopListening(otherModel, 'change');
+         * 
+         * @example
+         * // Stop listening to a specific listener
+         * const myListener = () => console.log('changed');
+         * this.listenTo(otherModel, 'change', myListener);
+         * this.stopListening(otherModel, 'change', myListener);
+         */
+        stopListening(emitter, type, listener) {
+            // No listeningTo object.
+            if (!this.listeningTo) return;
+            // Remove listener from the array of listeners.
+            this.listeningTo = this.listeningTo.filter(item => {
+                if (
+                    !emitter ||
+                    (emitter === item.emitter && !type) ||
+                    (emitter === item.emitter && type === item.type && !listener) ||
+                    (emitter === item.emitter && type === item.type && listener === item.listener)
+                ) {
+                    item.emitter.off(item.type, item.listener);
+                    return false;
+                }
+                return true;
+            });
+            // Remove listeningTo object if it's empty.
+            if (!this.listeningTo.length) delete this.listeningTo;
         }
     }
 
-    /*
+    /**
      * Evaluate the expression. If it's a function, call it with the provided context and return the result.
      * Otherwise, return the expression as is.
      * @param {any} expression Expression to be evaluated.
      * @param {any} context Context to call the expression.
      * @param {...any} args Arguments to pass to the expression.
      * @return {any} The result of the expression.
+     * @module
+     * @private
      */
-    var getResult = (expression, context, ...args) =>
+    const getResult = (expression, context, ...args) =>
         typeof expression !== 'function' ? expression :
             expression.apply(context, args);
 
@@ -157,55 +324,113 @@
      * A `Model` manages an internal table of data attributes and triggers change events when any of its data is modified.  
      * Models may handle syncing data with a persistence layer. To design your models, create atomic, reusable objects 
      * that contain all the necessary functions for manipulating their specific data.  
-     * Models should be easily passed throughout your app and used anywhere the corresponding data is needed.  
-     * Rasti models store their attributes in `this.attributes`, which is extended from `this.defaults` and the 
-     * constructor `attributes` parameter. For every attribute, a getter is generated to retrieve the model property 
-     * from `this.attributes`, and a setter is created to set the model property in `this.attributes` and emit `change` 
-     * and `change:attribute` events.
+     * Models should be easily passed throughout your app and used anywhere the corresponding data is needed.
+     * 
+     * ## Construction Flow
+     * 1. `preinitialize()` is called with all constructor arguments
+     * 2. `this.defaults` are resolved (if function, it's called and bound to the model)
+     * 3. `parse()` is called with all constructor arguments to process the data
+     * 4. `this.attributes` is built by merging defaults and parsed data
+     * 5. Getters/setters are generated for each attribute to emit change events
+     * 
      * @module
-     * @extends Rasti.Emitter
-     * @param {object} attributes Object containing model attributes to extend `this.attributes`. Getters and setters are generated for `this.attributes`, in order to emit `change` events.
-     * @property {object|function} defaults Object containing default attributes for the model. It will extend `this.attributes`. If a function is passed, it will be called to get the defaults. It will be bound to the model instance.
+     * @extends Emitter
+     * @param {object} [attributes={}] Primary data object containing model attributes
+     * @param {...*} [args] Additional arguments passed to `preinitialize` and `parse` methods
+     * @property {object|Function} defaults Default attributes for the model. If a function, it's called bound to the model instance to get defaults.
      * @property {object} previous Object containing previous attributes when a change occurs.
+     * @property {string} attributePrefix Static property that defines a prefix for generated getters/setters. Defaults to empty string.
      * @example
      * import { Model } from 'rasti';
-     * // Product model
-     * class ProductModel extends Model {
+     * 
+     * // User model
+     * class User extends Model {
      *     preinitialize() {
-     *         // The Product model has `name` and `price` default attributes.
-     *         // `defaults` will extend `this.attributes`.
-     *         // Getters and setters are generated for `this.attributes`,
-     *         // in order to emit `change` events.
+     *         this.defaults = { name : '', email : '', role : 'user' };
+     *     }
+     * }
+     * // Order model with nested User and custom methods
+     * class Order extends Model {
+     *     preinitialize(attributes, options = {}) {
      *         this.defaults = {
-     *             name: '',
-     *             price: 0
+     *             id : null,
+     *             total : 0,
+     *             status : 'pending',
+     *             user : null
      *         };
+     * 
+     *         this.apiUrl = options.apiUrl || '/api/orders';
      *     }
      *
-     *     setDiscount(discountPercentage) {
-     *         // Apply a discount to the price property.
-     *         // This will call a setter that will update `price` in `this.attributes`,
-     *         // and emit `change` and `change:price` events.
-     *         const discount = this.price * (discountPercentage / 100);
-     *         this.price -= discount;
+     *     parse(data, options = {}) {
+     *         const parsed = { ...data };
+     *         
+     *         // Convert user object to User model instance
+     *         if (data.user && !(data.user instanceof User)) {
+     *             parsed.user = new User(data.user);
+     *         }
+     * 
+     *         return parsed;
+     *     }
+     * 
+     *     toJSON() {
+     *         const result = {};
+     *         for (const [key, value] of Object.entries(this.attributes)) {
+     *             if (value instanceof Model) {
+     *                 result[key] = value.toJSON();
+     *             } else {
+     *                 result[key] = value;
+     *             }
+     *         }
+     *         return result;
+     *     }
+     * 
+     *     async fetch() {
+     *         try {
+     *             const response = await fetch(`${this.apiUrl}/${this.id}`);
+     *             const data = await response.json();
+     *             
+     *             // Parse the fetched data and update model
+     *             const parsed = this.parse(data);
+     *             this.set(parsed, { source : 'fetch' });
+     * 
+     *             return this;
+     *         } catch (error) {
+     *             console.error('Failed to fetch order:', error);
+     *             throw error;
+     *         }
      *     }
      * }
-     * // Create a product instance with a name and price.
-     * const product = new ProductModel({ name: 'Smartphone', price: 1000 });
-     * // Listen to the `change:price` event.
-     * product.on('change:price', () => console.log('New Price:', product.price));
-     * // Apply a 10% discount to the product.
-     * product.setDiscount(10); // Output: "New Price: 900"
+     * 
+     * // Create order with nested user data
+     * const order = new Order({
+     *     id : 123,
+     *     total : 99.99,
+     *     user : { name : 'Alice', email : 'alice@example.com' }
+     * });
+     * 
+     * console.log(order.user instanceof User); // true
+     * // Serialize with nested models
+     * const json = order.toJSON();
+     * console.log(json); // { id: 123, total: 99.99, status: 'pending', user: { name: 'Alice', email: 'alice@example.com', role: 'user' } }
+     * 
+     * // Listen to fetch updates
+     * order.on('change', (model, changed, options) => {
+     *     if (options?.source === 'fetch') {
+     *         console.log('Order updated from server:', changed);
+     *     }
+     * });
+     * 
+     * // Fetch latest data from server
+     * await order.fetch();
      */
     class Model extends Emitter {
-        constructor(attributes = {}) {
+        constructor() {
             super();
             // Call preinitialize.
             this.preinitialize.apply(this, arguments);
-            // Get defaults. If `this.defaults` is a function, call it.
-            const defaults = getResult(this.defaults, this) || {};
             // Set attributes object with defaults and passed attributes.
-            this.attributes = Object.assign({}, defaults, attributes);
+            this.attributes = Object.assign({}, getResult(this.defaults, this), this.parse.apply(this, arguments));
             // Object to store previous attributes when a change occurs.
             this.previous = {};
             // Generate getters/setters for every attribute.
@@ -213,21 +438,53 @@
         }
 
         /**
-         * If you define a preinitialize method, it will be invoked when the Model is first created, before any instantiation logic is run for the Model.
-         * @param {object} attributes Object containing model attributes to extend `this.attributes`.
+         * Called before any instantiation logic runs for the Model.
+         * Receives all constructor arguments, allowing for flexible initialization patterns.
+         * Use this to set up `defaults`, configure the model, or handle custom constructor arguments.
+         * @param {object} [attributes={}] Primary data object containing model attributes
+         * @param {...*} [args] Additional arguments passed from the constructor
+         * @example
+         * class User extends Model {
+         *     preinitialize(attributes, options = {}) {
+         *         this.defaults = { name : '', role : options.defaultRole || 'user' };
+         *         this.apiEndpoint = options.apiEndpoint || '/users';
+         *     }
+         * }
+         * const user = new User({ name : 'Alice' }, { defaultRole : 'admin', apiEndpoint : '/api/users' });
          */
         preinitialize() {}
 
         /**
-         * Generate getter/setter for the given key. In order to emit `change` events.
-         * This method is called internally by the constructor
-         * for `this.attributes`.
-         * @param {string} key Attribute key.
+         * Generate getter/setter for the given attribute key to emit `change` events.
+         * The property name uses `attributePrefix` + key (e.g., with prefix 'attr_', key 'name' becomes 'attr_name').
+         * Called internally by the constructor for each key in `this.attributes`.
+         * Override with an empty method if you don't want automatic getters/setters.
+         * 
+         * @param {string} key Attribute key from `this.attributes`
+         * @example
+         * // Custom prefix for all attributes
+         * class PrefixedModel extends Model {
+         *     static attributePrefix = 'attr_';
+         * }
+         * const model = new PrefixedModel({ name: 'Alice' });
+         * console.log(model.attr_name); // 'Alice'
+         * 
+         * // Disable automatic getters/setters
+         * class ManualModel extends Model {
+         *     defineAttribute() {
+         *         // Empty - no getters/setters generated
+         *     }
+         *     
+         *     getName() {
+         *         return this.get('name'); // Manual getter
+         *     }
+         * }
          */
         defineAttribute(key) {
             Object.defineProperty(
                 this,
-                key, {
+                `${this.constructor.attributePrefix}${key}`,
+                {
                     get : () => this.get(key),
                     set : (value) => { this.set(key, value); }
                 }
@@ -245,18 +502,28 @@
         }
 
         /**
-         * Set an attribute into `this.attributes`.  
-         * Emit `change` and `change:attribute` if a value changes.  
-         * Could be called in two forms, `this.set('key', value)` and
-         * `this.set({ key : value })`.  
-         * This method is called internally by generated setters.  
-         * The `change` event listener will receive the model instance, an object containing the changed attributes, and the rest of the arguments passed to `set` method.  
-         * The `change:attribute` event listener will receive the model instance, the new attribute value, and the rest of the arguments passed to `set` method.
-         * @param {string} key Attribute key or object containing keys/values.
-         * @param [value] Attribute value.
-         * @return {this} This model.
-         * @emits change
-         * @emits change:attribute
+         * Set one or more attributes into `this.attributes` and emit change events.
+         * Supports two call signatures: `set(key, value, ...args)` or `set(object, ...args)`.
+         * Additional arguments are passed to change event listeners, enabling custom behavior.
+         * 
+         * @param {string|object} key Attribute key (string) or object containing key-value pairs
+         * @param {*} [value] Attribute value (when key is string)
+         * @param {...*} [args] Additional arguments passed to event listeners
+         * @return {Model} This model instance for chaining
+         * @emits change Emitted when any attribute changes. Listeners receive `(model, changedAttributes, ...args)`
+         * @emits change:attribute Emitted for each changed attribute. Listeners receive `(model, newValue, ...args)`
+         * @example
+         * // Basic usage
+         * model.set('name', 'Alice');
+         * model.set({ name : 'Alice', age : 30 });
+         * 
+         * // With options for listeners
+         * model.set('name', 'Bob', { silent : false, validate : true });
+         * model.on('change:name', (model, value, options) => {
+         *     if (options?.validate) {
+         *         // Custom validation logic
+         *     }
+         * });
          */
         set(key, value, ...rest) {
             let attrs, args;
@@ -310,16 +577,101 @@
             return this;
         }
 
+        /**
+         * Transforms and validates data before it becomes model attributes.
+         * Called during construction with all constructor arguments, allowing flexible data processing.
+         * Override this method to transform incoming data, create nested models, or handle different data formats.
+         * 
+         * @param {object} [data={}] Primary data object to be parsed into attributes
+         * @param {...*} [args] Additional arguments from constructor, useful for parsing options
+         * @return {object} Processed data that will become the model's attributes
+         * @example
+         * // Transform nested objects into models
+         * class User extends Model {}
+         * class Order extends Model {
+         *     parse(data, options = {}) {
+         *         // Skip parsing if requested
+         *         if (options.raw) return data;
+         *         // Transform user data into User model
+         *         const parsed = { ...data };
+         *         if (data.user && !(data.user instanceof User)) {
+         *             parsed.user = new User(data.user);
+         *         }
+         *         return parsed;
+         *     }
+         * }
+         * 
+         * // Usage with parsing options
+         * const order1 = new Order({ id : 1, user : { name : 'Alice' } }); // user becomes User model
+         * const order2 = new Order({ id : 2, user : { name : 'Bob' } }, { raw : true }); // user stays plain object
+         */
+        parse(data) {
+            return data;
+        }
+
         /**
          * Return object representation of the model to be used for JSON serialization.
          * By default returns a copy of `this.attributes`.
+         * You can override this method to customize serialization behavior, such as calling `toJSON` recursively on nested Model instances.
          * @return {object} Object representation of the model to be used for JSON serialization.
+         * @example
+         * // Basic usage - returns a copy of model attributes:
+         * const user = new Model({ name : 'Alice', age : 30 });
+         * const json = user.toJSON();
+         * console.log(json); // { name : 'Alice', age : 30 }
+         * 
+         * // Override toJSON for recursive serialization of nested models:
+         * class User extends Model {}
+         * class Order extends Model {
+         *     parse(data) {
+         *         // Ensure user is always a User model
+         *         return { ...data, user : data.user instanceof User ? data.user : new User(data.user) };
+         *     }
+         * 
+         *     toJSON() {
+         *         const result = {};
+         *         for (const [key, value] of Object.entries(this.attributes)) {
+         *             if (value instanceof Model) {
+         *                 result[key] = value.toJSON();
+         *             } else {
+         *                 result[key] = value;
+         *             }
+         *         }
+         *         return result;
+         *     }
+         * }
+         * const order = new Order({ id : 1, user : { name : 'Alice' } });
+         * const json = order.toJSON();
+         * console.log(json); // { id : 1, user : { name : 'Alice' } }
          */
         toJSON() {
             return Object.assign({}, this.attributes);
         }
     }
 
+    /**
+     * Static property that defines a prefix for generated getters/setters.
+     * When set, all attribute properties will be prefixed (e.g., 'attr_name' instead of 'name').
+     * Useful for avoiding naming conflicts or creating a consistent property naming convention.
+     * @type {string}
+     * @default ''
+     * @example
+     * // Set prefix for all models of this class
+     * class ApiModel extends Model {
+     *     static attributePrefix = 'attr_';
+     * }
+     * 
+     * const user = new ApiModel({ name : 'Alice', email : 'alice@example.com' });
+     * console.log(user.attr_name);  // 'Alice'
+     * console.log(user.attr_email); // 'alice@example.com'
+     * 
+     * // Still access via get/set methods without prefix
+     * console.log(user.get('name')); // 'Alice'
+     * user.set('name', 'Bob');
+     * console.log(user.attr_name); // 'Bob'
+     */
+    Model.attributePrefix = '';
+
     /*
      * These option keys will be extended on the view instance.
      */
@@ -340,15 +692,15 @@
      * @module
      * @extends Emitter
      * @param {object} options Object containing options. The following keys will be merged into the view instance: `el`, `tag`, `attributes`, `events`, `model`, `template`, `onDestroy`.
-     * @property {node|function} el Every view has a root DOM element stored at `this.el`. If not present, it will be created. If `this.el` is a function, it will be called to get the element at `this.ensureElement`, bound to the view instance. See {@link module_view__ensureelement View.ensureElement}.
-     * @property {string|function} tag If `this.el` is not present, an element will be created using `this.tag` and `this.attributes`. Default is `div`. If it is a function, it will be called to get the tag, bound to the view instance. See {@link module_view__ensureelement View.ensureElement}.
-     * @property {object|function} attributes If `this.el` is not present, an element will be created using `this.tag` and `this.attributes`. If it is a function, it will be called to get the attributes object, bound to the view instance. See {@link module_view__ensureelement View.ensureElement}.
-     * @property {object|function} events Object in the format `{'event selector' : 'listener'}`. It will be used to bind delegated event listeners to the root element. If it is a function, it will be called to get the events object, bound to the view instance. See {@link module_view_delegateevents View.delegateEvents}.
+     * @property {node|Function} el Every view has a root DOM element stored at `this.el`. If not present, it will be created. If `this.el` is a function, it will be called to get the element at `this.ensureElement`, bound to the view instance. See {@link module_view__ensureelement View.ensureElement}.
+     * @property {string|Function} tag If `this.el` is not present, an element will be created using `this.tag` and `this.attributes`. Default is `div`. If it is a function, it will be called to get the tag, bound to the view instance. See {@link module_view__ensureelement View.ensureElement}.
+     * @property {object|Function} attributes If `this.el` is not present, an element will be created using `this.tag` and `this.attributes`. If it is a function, it will be called to get the attributes object, bound to the view instance. See {@link module_view__ensureelement View.ensureElement}.
+     * @property {object|Function} events Object in the format `{'event selector' : 'listener'}`. It will be used to bind delegated event listeners to the root element. If it is a function, it will be called to get the events object, bound to the view instance. See {@link module_view_delegateevents View.delegateEvents}.
      * @property {object} model A model or any object containing data and business logic.
-     * @property {function} template A function that returns a string with the view's inner HTML. See {@link module_view__render View.render}. 
+     * @property {Function} template A function that returns a string with the view's inner HTML. See {@link module_view__render View.render}. 
      * @property {number} uid Unique identifier for the view instance. This can be used to generate unique IDs for elements within the view. It is automatically generated and should not be set manually.
      * @example
-     * import { View } from 'rasti';
+     * import { View, Model } from 'rasti';
      * 
      * class Timer extends View {
      *     constructor(options) {
@@ -373,9 +725,6 @@
             super();
             // Call preinitialize.
             this.preinitialize.apply(this, arguments);
-            // Generate unique id.
-            // Useful to generate element ids.
-            this.uid = `rasti-${++View.uid}`;
             // Store delegated event listeners,
             // so they can be unbound later.
             this.delegatedEventListeners = [];
@@ -384,17 +733,23 @@
             this.children = [];
             // Mutable array to store handlers to be called on destroy.
             this.destroyQueue = [];
+            this.viewOptions = [];
             // Extend "this" with options.
             viewOptions.forEach(key => {
-                if (key in options) this[key] = options[key];
+                if (key in options) {
+                    this[key] = options[key];
+                    this.viewOptions.push(key);
+                }
             });
+            // Ensure that the view has a unique id at `this.uid`.
+            this.ensureUid();
             // Ensure that the view has a root element at `this.el`.
             this.ensureElement();
         }
 
         /**
          * If you define a preinitialize method, it will be invoked when the view is first created, before any instantiation logic is run.
-         * @param {object} attrs Object containing model attributes to extend `this.attributes`.
+         * @param {object} options The view options.
          */
         preinitialize() {}
 
@@ -429,6 +784,8 @@
             this.destroyChildren();
             // Undelegate `this.el` event listeners
             this.undelegateEvents();
+            // Stop listening to events.
+            this.stopListening();
             // Unbind `this` events.
             this.off();
             // Call destroy queue.
@@ -436,6 +793,8 @@
             this.destroyQueue = [];
             // Call onDestroy lifecycle method
             this.onDestroy.apply(this, arguments);
+            // Set destroyed flag.
+            this.destroyed = true;
             // Return `this` for chaining.
             return this;
         }
@@ -467,6 +826,13 @@
             this.children = [];
         }
 
+        /**
+         * Ensure that the view has a unique id at `this.uid`.
+         */
+        ensureUid() {
+            if (!this.uid) this.uid = `r-${++View.uid}`;
+        }
+
         /**
          * Ensure that the view has a root element at `this.el`.
          * You shouldn't call this method directly. It's called from the constructor.
@@ -533,26 +899,43 @@
          * All attached listeners are bound to the view, ensuring that `this` refers to the view object when the listeners are invoked.
          * When `delegateEvents` is called again, possibly with a different events object, all previous listeners are removed and delegated afresh.
          * 
-         * The listeners will be invoked with the event and the view as arguments.
-         * 
+         * **Listener signature:** `(event, view, matched)`
+         * - `event`:   The native DOM event object.
+         * - `view`:    The current view instance (`this`).
+         * - `matched`: The element that satisfies the selector. If no selector is provided, it will be the view's root element (`this.el`).
+         *
+         * If more than one ancestor between `event.target` and the view's root element matches the selector, the listener will be
+         * invoked **once for each matched element** (from inner to outer).
+         *
          * @param {object} [events] Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to the root element.
          * @return {Rasti.View} Returns `this` for chaining.
          * @example
-         * // Using a function.
+         * // Using prototype (recommended for static events)
          * class Modal extends View {
+         *     onClickOk(event, view, matched) {
+         *         // matched === the button.ok element that was clicked
+         *         this.close();
+         *     }
+         *     
+         *     onClickCancel() {
+         *         this.destroy();
+         *     }
+         * }
+         * Modal.prototype.events = {
+         *     'click button.ok': 'onClickOk',
+         *     'click button.cancel': 'onClickCancel',
+         *     'submit form': 'onSubmit'
+         * };
+         * 
+         * // Using a function for dynamic events
+         * class DynamicView extends View {
          *     events() {
          *         return {
-         *             'click button.ok': 'onClickOkButton',
-         *             'click button.cancel': function() {}
+         *             [`click .${this.model.buttonClass}`]: 'onButtonClick',
+         *             'click': 'onRootClick'
          *         };
          *     }
          * }
-         * 
-         * // Using an object.
-         * Modal.prototype.events = {
-         *     'click button.ok' : 'onClickOkButton',
-         *     'click button.cancel' : function() {}
-         * };
          */
         delegateEvents(events) {
             if (!events) events = getResult(this.events, this);
@@ -569,13 +952,10 @@
                 const selector = keyParts.join(' ');
 
                 let listener = events[key];
-                // Listener may be a string representing a method name on the view,
-                // or a function.
-                listener = (
-                    typeof listener === 'string' ?
-                        this[listener] :
-                        listener
-                ).bind(this);
+                // Listener may be a string representing a method name on the view, or a function.
+                if (typeof listener === 'string') listener = this[listener];
+                // Validate listener is a function.
+                validateListener(listener);
 
                 if (!eventTypes[type]) eventTypes[type] = [];
 
@@ -587,7 +967,20 @@
                 const typeListener = (event) => {
                     // Iterate and run every individual listener if the selector matches.
                     eventTypes[type].forEach(({ selector, listener }) => {
-                        if (!selector || event.target.closest(selector)) listener(event, this);
+                        // No selector provided: invoke listener once with root element.
+                        if (!selector) {
+                            listener.call(this, event, this, this.el);
+                            return;
+                        }
+
+                        let node = event.target;
+                        // Traverse ancestors until reaching the view root (`this.el`).
+                        while (node && node !== this.el) {
+                            if (node.matches && node.matches(selector)) {
+                                listener.call(this, event, this, node);
+                            }
+                            node = node.parentElement;
+                        }
                     });
                 };
 
@@ -641,7 +1034,7 @@
          * Override this method to provide a custom escape function.
          * This method is inherited by {@link #module_component Component} and used to escape template interpolations.
          * @static
-         * @param {string} str String to escape.
+         * @param {string} value String to escape.
          * @return {string} Escaped string.
          */
         static sanitize(value) {
@@ -668,20 +1061,8 @@
      */
     View.uid = 0;
 
-    /*
-     * Flatten an array recursively
-     * @param {Array} arr Array to flat recursively
-     * @return {Array} Flat array
-     */
-    const deepFlat = (arr) => arr.reduce((acc, val) => {
-        if (Array.isArray(val)) acc.push(...deepFlat(val));
-        else acc.push(val);
-        return acc;
-    }, []);
-
     /**
      * Wrapper class for HTML strings marked as safe.
-     * @class SafeHTML
      * @param {string} value The HTML string to be marked as safe.
      * @property {string} value The HTML string.
      * @private
@@ -697,282 +1078,1001 @@
     }
 
     /**
-     * Same as getResult, but pass context as argument to the expression.
-     * Used to evaluate expressions in the context of a component.
-     * @param {any} expression The expression to be evaluated.
-     * @param {any} context The context to call the expression with.
-     * @return {any} The result of the evaluated expression.
+     * Wrapper class for partial templates that preserves structure.
+     * @param {Array} items The items in the partial.
      * @private
      */
-    const getExpressionResult = (expression, context) => getResult(expression, context, context);
+    class Partial {
+        constructor(items) {
+            this.items = items;
+        }
+    }
 
     /**
-     * Generate string with placeholders for interpolated expressions.
-     * @param strings {array} Array of strings.
-     * @param expressions {array} Array of expressions.
-     * @return {string} String with placeholders.
+     * Wrapper for interpolation results with markers.
+     * @param {number} interpolationUid The interpolation UID for markers.
+     * @param {any} result The interpolation result.
      * @private
      */
-    const addPlaceholders = (strings, expressions) => 
-        strings.reduce((out, string, i) => {
-            // Add string part.
-            out.push(string);
-            // Add expression placeholders.
-            if (typeof expressions[i] !== 'undefined') {
-                out.push(Component.PLACEHOLDER_EXPRESSION(i));
-            }
-            return out;
-        }, []).join('');
+    class InterpolationWrapper {
+        constructor(interpolationUid, result) {
+            this.interpolationUid = interpolationUid;
+            this.result = result;
+        }
+    }
 
     /**
-     * Generate one dimensional array with strings and expressions.
-     * @param main {string} The main template containing placeholders.
-     * @param expressions {array} Array of expressions to replace placeholders.
-     * @return {array} Array containing strings and expressions.
+     * Manager for delegated events.
      * @private
      */
-    const splitPlaceholders = (main, expressions) => {
-        const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
-        const regExp = new RegExp(`${PH}`, 'g');
-        const out = [];
-        let lastIndex = 0;
-        let match;
-        // Generate one dimensional array with strings and expressions, 
-        // so all the components are added as children by the parent component.
-        while ((match = regExp.exec(main)) !== null) {
-            const before = main.slice(lastIndex, match.index);
-            out.push(Component.markAsSafeHTML(before), expressions[match[1]]);
-            lastIndex = match.index + match[0].length;
+    class EventsManager {
+        constructor() {
+            this.listeners = [];
+            this.types = new Set();
+            this.previousSize = 0;
         }
-        out.push(Component.markAsSafeHTML(main.slice(lastIndex)));
 
-        return out;
-    };
+        /**
+         * Add a listener to the events manager.
+         * @param {Function} listener The listener to add.
+         * @param {string} type The type of event.
+         * @return {number} The index of the listener.
+         */
+        addListener(listener, type) {
+            this.types.add(type);
+            this.listeners.push(listener);
+            return this.listeners.length - 1;
+        }
+
+        /**
+         * Reset the events manager.
+         */
+        reset() {
+            this.listeners = [];
+            this.previousSize = this.types.size;
+        }
+
+        /**
+         * Check if there are pending types.
+         * @return {boolean} True if there are pending types, false otherwise.
+         */
+        hasPendingTypes() {
+            return this.types.size > this.previousSize;
+        }
+    }
 
     /**
-     * Expand attributes.
-     * @param attributes {array} Array of attributes as key, value pairs.
-     * @param getExpressionResult {function} Function to render expressions.
-     * @return {object}
-     * @property {object} all All attributes.
-     * @property {object} events Event listeners.
-     * @property {object} attributes Attributes.
+     * Manager for component position tracking and recycling.
      * @private
      */
-    const expandAttributes = (attributes, getExpressionResult) => {
-        const out = attributes.reduce((out, pair) => {
-            const attribute = getExpressionResult(pair[0]);
-            // Attribute without value. 
-            if (pair.length === 1) {
-                if (typeof attribute === 'object') {
-                    // Expand objects as attributes.
-                    out.all = Object.assign(out.all, attribute);
-                } else if (typeof attribute === 'string') {
-                    // Treat as boolean.
-                    out.all[attribute] = true;
-                }
-            } else {
-                // Attribute with value.
-                const value = getExpressionResult(pair[1]);
-                out.all[attribute] = value;
-            }
+    class PathManager {
+        constructor() {}
 
-            return out;
-        }, { all : {}, events : {}, attributes : {} });
+        /**
+         * Reset before render.
+         */
+        reset() {
+            this.paused = 0;
+            this.previous = this.tracked || new Map();
+            this.tracked = new Map();
+            this.positionStack = [0];
+        }
 
-        Object.keys(out.all).forEach(key => {
-            // Check if key is an event listener.
-            const match = key.match(/on(([A-Z]{1}[a-z]+)+)/);
-            if (match && match[1]) {
-                // Add event listener.
-                out.events[match[1].toLowerCase()] = out.all[key];
-            } else {
-                // Add attribute.
-                out.attributes[key] = out.all[key];
+        /**
+         * Push position to stack.
+         */
+        push() {
+            this.positionStack.push(0);
+        }
+
+        /**
+         * Pop position from stack.
+         */
+        pop() {
+            this.positionStack.pop();
+        }
+
+        /**
+         * Increment position.
+         */
+        increment() {
+            this.positionStack[this.positionStack.length - 1]++;
+        }
+
+        /**
+         * Pause tracking.
+         */
+        pause() {
+            this.paused++;
+        }
+
+        /**
+         * Resume tracking.
+         */
+        resume() {
+            this.paused--;
+        }
+
+        /**
+         * Get current path as array.
+         * @return {string} Current position path.
+         */
+        getPath() {
+            return this.positionStack.join('-');
+        }
+
+        /**
+         * Track component at current path.
+         * @param {Component} component The component to track.
+         * @return {Component} The component.
+         */
+        track(component) {
+            if (this.paused === 0) {
+                this.tracked.set(
+                    this.getPath(),
+                    component
+                );
             }
-        });
 
-        return out;
-    };
+            return component;
+        }
+
+        /**
+         * Find recyclable component by path and type.
+         * @param {Function} constructor The component constructor.
+         * @return {Component|null} The recyclable component or null.
+         */
+        findRecyclable(constructor) {
+            const prev = this.previous.get(this.getPath());
+            return prev && prev.constructor === constructor && !prev.key ? prev : null;
+        }
+    }
 
     /**
-     * Replace component tags with expressions.
-     * `<${Component} />` or `<${Component}></${Component}>` will be replaced 
+     * Get difference between current and previous attributes.
+     * @param {Object} attributes Current attributes object.
+     * @param {Object} previous Previous attributes object.
+     * @return {Object} Object with add and remove properties.
+     * @module
+     * @private
+     */
+    function getAttributesDiff(attributes, previous = {}) {
+        const add = {};
+        const remove = [];
+        // Find attributes to add/update.
+        Object.keys(attributes).forEach(key => {
+            let value = attributes[key];
+            
+            if (value === true) {
+                add[key] = '';
+            } else if (value !== false) {
+                if (value === null || typeof value === 'undefined') value = '';
+                add[key] = value;
+            }
+        });
+        // Find attributes to remove.
+        Object.keys(previous).forEach(key => {
+            if (!(key in attributes) || ((previous[key] !== attributes[key]) && attributes[key] === false)) {
+                remove.push(key);
+            }
+        });
+
+        return { add, remove };
+    }
+
+    const SYNC_PROPS$1 = ['value', 'checked', 'selected'];
+
+    /**
+     * Element reference for managing DOM element attributes.
+     * @param {Object} options The options object.
+     * @param {Function} options.getSelector Function that returns the CSS selector for the element.
+     * @param {Function} options.getAttributes Function that returns the attributes object for the element.
+     * @private
+     */
+    class Element {
+        constructor(options) {
+            this.getSelector = options.getSelector;
+            this.getAttributes = options.getAttributes;
+            this.previousAttributes = {};
+        }
+
+        /**
+         * Attach the element reference to a DOM element.
+         * @param {Node} parent The parent node to search in.
+         */
+        hydrate(parent) {
+            this.ref = parent.querySelector(this.getSelector());
+        }
+
+        /**
+         * Update the element's attributes based on the difference with previous attributes.
+         */
+        update() {
+            // Attributes diff.
+            const attributes = this.getAttributes();
+            const { remove, add } = getAttributesDiff(attributes, this.previousAttributes);
+            // Store previous attributes.
+            this.previousAttributes = attributes;
+            // Remove attributes first so later `setAttribute` overrides if needed.
+            remove.forEach(attr => {
+                this.ref.removeAttribute(attr);
+                if (SYNC_PROPS$1.includes(attr) && attr in this.ref) {
+                    // Reset property to default.
+                    this.ref[attr] = attr === 'value' ? '' : false;
+                }
+            });
+            // Add / update attributes.
+            Object.keys(add).forEach(attr => {
+                const value = add[attr];
+                this.ref.setAttribute(attr, value);
+                if (SYNC_PROPS$1.includes(attr) && attr in this.ref) {
+                    this.ref[attr] = attr === 'value' ? value : value !== false && value !== 'false';
+                }
+            });
+        }
+    }
+
+    /**
+     * Properties that should be mirrored from source to target.
+     * @type {string[]}
+     * @private
+     */
+    const SYNC_PROPS = ['value', 'checked', 'selected'];
+
+    /**
+     * Compares two elements to see if their child nodes are structurally equal.
+     * @param {Element} a First element to compare.
+     * @param {Element} b Second element to compare.
+     * @return {boolean} True if all child nodes are deeply equal.
+     * @private
+     */
+    const areChildNodesEqual = (a, b) => {
+        const aChildren = a.childNodes;
+        const bChildren = b.childNodes;
+        const aLength = aChildren.length;
+
+        if (aLength !== bChildren.length) return false;
+
+        for (let i = 0; i < aLength; i++) {
+            if (!aChildren[i].isEqualNode(bChildren[i])) {
+                return false;
+            }
+        }
+        return true;
+    };
+
+    /**
+     * Synchronizes attributes and key DOM properties (value, checked, selected).
+     * Assumes tagName is already the same.
+     * @param {Element} targetEl Target DOM element to update.
+     * @param {Element} sourceEl Source DOM element to copy attributes from.
+     * @private
+     */
+    const syncAttributes = (targetEl, sourceEl) => {
+        // Add, update and remove attributes.
+        const srcAttrs = sourceEl.attributes;
+        const tgtAttrs = targetEl.attributes;
+        const srcAttrNames = new Set();
+
+        for (let i = 0, l = srcAttrs.length; i < l; i++) {
+            const { name, value } = srcAttrs[i];
+            srcAttrNames.add(name);
+            if (targetEl.getAttribute(name) !== value) targetEl.setAttribute(name, value);
+        }
+
+        for (let i = tgtAttrs.length - 1; i >= 0; i--) {
+            const { name } = tgtAttrs[i];
+            if (!srcAttrNames.has(name)) targetEl.removeAttribute(name);
+        }
+        // Sync key DOM properties.
+        for (let i = 0, l = SYNC_PROPS.length; i < l; i++) {
+            const prop = SYNC_PROPS[i];
+            if (prop in targetEl && targetEl[prop] !== sourceEl[prop]) {
+                targetEl[prop] = sourceEl[prop];
+            }
+        }
+    };
+
+    /**
+     * Replaces all child nodes of targetEl with those from sourceEl.
+     * Moves the nodes without cloning.
+     * @param {Element} targetEl The element whose children will be replaced.
+     * @param {Element} sourceEl The element providing new children.
+     * @module
+     * @private
+     */
+    const syncNodeContent = (targetEl, sourceEl) => {
+        const children = Array.from(sourceEl.childNodes);
+        targetEl.replaceChildren(...children);
+    };
+
+    /**
+     * Synchronizes the contents of one DOM node to match another.
+     * It performs a shallow sync: tag name, attributes, properties, and child nodes.
+     * If tag names or node types differ, it replaces the node entirely.
+     * @param {Node} targetNode The node currently in the DOM to be updated.
+     * @param {Node} sourceNode The reference node to sync from (not in the DOM).
+     * @private
+     */
+    function syncNode(targetNode, sourceNode) {
+        // Replace if node types are different (e.g. element vs text).
+        if (targetNode.nodeType !== sourceNode.nodeType) {
+            targetNode.replaceWith(sourceNode);
+            return;
+        }
+        // Text node: sync value.
+        if (targetNode.nodeType === Node.TEXT_NODE) {
+            if (targetNode.nodeValue !== sourceNode.nodeValue) {
+                targetNode.nodeValue = sourceNode.nodeValue;
+            }
+            return;
+        }
+        // Element node: check tag.
+        if (targetNode.tagName !== sourceNode.tagName) {
+            targetNode.replaceWith(sourceNode);
+            return;
+        }
+        // Sync attributes and DOM properties.
+        syncAttributes(targetNode, sourceNode);
+        // Sync child nodes if necessary.
+        if (!areChildNodesEqual(targetNode, sourceNode)) {
+            syncNodeContent(targetNode, sourceNode);
+        }
+    }
+
+    /**
+     * Finds the first comment node whose text matches exactly the given `text`.
+     * Uses manual DOM traversal. Skips entire subtrees if `shouldSkip(element)` returns true.
+     * Starts searching from `startNode` if provided, otherwise from `root.firstChild`.
+     * @param {Node} root - Root node or fragment that limits the search scope.
+     * @param {string} text - Exact comment text to match.
+     * @param {Function} [shouldSkip] - Function that receives an element and returns true if its subtree should be skipped.
+     * @param {Node} [startNode] - Node to start searching from (defaults to root.firstChild).
+     * @return {Comment|null} The first matching comment node, or null if not found.
+     * @module
+     * @private
+     */
+    function findComment(
+        root,
+        text,
+        shouldSkip = () => false,
+        startNode
+    ) {
+        let node = startNode || root.firstChild;
+
+        while (node) {
+            // Check if current node is a comment with matching text.
+            if (node.nodeType === Node.COMMENT_NODE && node.data.trim() === text) {
+                return node;
+            }
+            // Descend into children if allowed and present.
+            if (node.nodeType === Node.ELEMENT_NODE && !shouldSkip(node) && node.firstChild) {
+                node = node.firstChild;
+                continue;
+            }
+            // Move to next sibling, or climb up until a sibling is found.
+            while (node && !node.nextSibling) {
+                node = node.parentNode;
+                if (!node || node === root) return null;
+            }
+            if (node) node = node.nextSibling;
+        }
+
+        return null;
+    }
+
+    /**
+     * Interpolation reference for managing dynamic content between comment markers.
+     * Handles the lifecycle of content that can change between renders, including
+     * component recycling and DOM synchronization.
+     * @param {Object} options The options object.
+     * @param {Function} options.getStart Function that returns the start comment marker text.
+     * @param {Function} options.getEnd Function that returns the end comment marker text.
+     * @param {any} options.expression The expression to be evaluated for the interpolation.
+     * @param {Function} options.isComponent Function that checks if an element is a component root element.
+     * @param {Function} options.isElement Function that checks if an element has the Rasti data attribute.
+     * @private
+     */
+    class Interpolation {
+        constructor(options) {
+            this.getStart = options.getStart;
+            this.getEnd = options.getEnd;
+            this.expression = options.expression;
+            this.isComponent = options.isComponent;
+            this.isElement = options.isElement;
+        }
+
+        /**
+         * Attach the interpolation reference to comment markers in the DOM.
+         * Searches for start and end comment markers, skipping component subtrees.
+         * @param {Node} parent The parent node to search in.
+         */
+        hydrate(parent) {
+            const startComment = findComment(parent, this.getStart(), this.isComponent);
+            const endComment = findComment(parent, this.getEnd(), this.isComponent, startComment);
+
+            this.ref = [
+                startComment, 
+                endComment
+            ];
+        }
+
+        /**
+         * Update the interpolation content with a new fragment.
+         * Optimizes updates by syncing single non-component elements or replacing content entirely.
+         * @param {DocumentFragment} fragment The new content fragment to insert.
+         */
+        update(fragment) {
+            const [startComment, endComment] = this.ref;
+
+            const currentFirstElement = startComment.nextSibling;
+            const currentSingleChildElement = currentFirstElement.nextSibling === endComment;
+            const currentEmpty = currentFirstElement == endComment;
+            const fragmentChildren = fragment.children;
+
+            if (currentSingleChildElement && fragmentChildren.length === 1 && !this.isElement(currentFirstElement)) {
+                // There is a single child element that is not a component's root element. Sync node attributes and content.
+                syncNode(currentFirstElement, fragmentChildren[0]);
+            } else if (currentEmpty) {
+                // Interpolation is empty. Insert the fragment.
+                endComment.parentNode.insertBefore(fragment, endComment);
+            } else {
+                // Interpolation is not empty. Replace the interpolation content.
+                const range = document.createRange();
+                range.setStartAfter(startComment);
+                range.setEndBefore(endComment);
+                range.deleteContents();
+                range.insertNode(fragment);
+            }
+        }
+    }
+
+    /**
+     * Flatten an array recursively.
+     * @param {Array} arr Array to flat recursively
+     * @return {Array} Flat array
+     * @module
+     * @private
+     */
+    const deepFlat = (arr) => arr.reduce((acc, val) => {
+        if (Array.isArray(val)) acc.push(...deepFlat(val));
+        else acc.push(val);
+        return acc;
+    }, []);
+
+    /**
+     * Parse HTML string to a DocumentFragment.
+     * @param {string} html The HTML string to parse.
+     * @return {DocumentFragment} The parsed DocumentFragment.
+     * @module
+     * @private
+     */
+    function parseHTML(html) {
+        const fragment = document.createElement('template');
+        fragment.innerHTML = `${html}`.trim();
+        return fragment.content;
+    }
+
+    /**
+     * Generate HTML string from attributes object.
+     * @param {Object} attributes Object containing attribute names and values.
+     * @return {string} HTML string of attributes.
+     * @module
+     * @private
+     */
+    function getAttributesHTML(attributes) {
+        const html = [];
+
+        Object.keys(attributes).forEach(key => {
+            let value = attributes[key];
+
+            if (value === true) {
+                html.push(key);
+            } else if (value !== false) {
+                if (value === null || typeof value === 'undefined') value = '';
+                html.push(`${key}="${value}"`);
+            }
+        });
+
+        return html.join(' ');
+    }
+
+    /**
+     * Same as getResult, but pass context as argument to the expression.
+     * Used to evaluate expressions in the context of a component.
+     * @param {any} expression The expression to be evaluated.
+     * @param {any} context The context to call the expression with.
+     * @return {any} The result of the evaluated expression.
+     * @private
+     */
+    const getExpressionResult = (expression, context) => getResult(expression, context, context);
+
+    /**
+     * Check if an element is a component root element.
+     * Component root elements have the data attribute ending with '-1'.
+     * @param {Element} el The element to check.
+     * @return {boolean} True if the element is a component root element.
+     * @private
+     */
+    const isComponent = (el) => el.hasAttribute(Component.ATTRIBUTE_ELEMENT) && el.getAttribute(Component.ATTRIBUTE_ELEMENT).endsWith('-1');
+
+    /**
+     * Check if an element has the Rasti data attribute.
+     * This includes both component root elements and regular tracked elements.
+     * @param {Element} el The element to check.
+     * @return {boolean} True if the element has the data attribute.
+     * @private
+     */
+    const isElement = (el) => el.hasAttribute(Component.ATTRIBUTE_ELEMENT);
+
+    /**
+     * Generate string with placeholders for interpolated expressions.
+     * @param {Array<string>} strings Array of strings.
+     * @param {Array<any>} expressions Array of expressions.
+     * @return {string} String with placeholders.
+     * @private
+     */
+    const addPlaceholders = (strings, expressions) => 
+        strings.reduce((out, string, i) => {
+            // Add string part.
+            out.push(string);
+            // Add expression placeholders.
+            if (typeof expressions[i] !== 'undefined') {
+                out.push(Component.PLACEHOLDER(i));
+            }
+            return out;
+        }, []).join('');
+
+    /**
+     * Generate one dimensional array with strings and expressions.
+     * @param main {string} The main template containing placeholders.
+     * @param {Array<any>} expressions Array of expressions to replace placeholders.
+     * @return {array} Array containing strings and expressions.
+     * @private
+     */
+    const splitPlaceholders = (main, expressions) => {
+        const PH = Component.PLACEHOLDER('(\\d+)');
+        const regExp = new RegExp(`${PH}`, 'g');
+        const out = [];
+        let lastIndex = 0;
+        let match;
+        // Generate one dimensional array with strings and expressions, 
+        // so all the components are added as children by the parent component.
+        while ((match = regExp.exec(main)) !== null) {
+            const before = main.slice(lastIndex, match.index);
+            out.push(Component.markAsSafeHTML(before), expressions[match[1]]);
+            lastIndex = match.index + match[0].length;
+        }
+        out.push(Component.markAsSafeHTML(main.slice(lastIndex)));
+
+        return out;
+    };
+
+    /**
+     * Expand attributes.
+     * @param {Array<Array<any>>} attributes Array of attributes as key, value pairs.
+     * @param {Function} getExpressionResult Function to render expressions.
+     * @return {object}
+     * @property {object} all All attributes.
+     * @property {object} events Event listeners.
+     * @property {object} attributes Attributes.
+     * @private
+     */
+    const expandAttributes = (attributes, getExpressionResult) => attributes.reduce((out, pair) => {
+        const attribute = getExpressionResult(pair[0]);
+        // Attribute without value. 
+        if (pair.length === 1) {
+            if (typeof attribute === 'object') {
+                // Expand objects as attributes.
+                out = Object.assign(out, attribute);
+            } else if (typeof attribute === 'string') {
+                // Treat as boolean.
+                out[attribute] = true;
+            }
+        } else {
+            // Attribute with value.
+            const value = pair[2] ? getExpressionResult(pair[1]) : pair[1];
+            out[attribute] = value;
+        }
+
+        return out;
+    }, {});
+
+    /**
+     * Expand events.
+     * @param {object} attributes Attributes object.
+     * @param {EventsManager} eventsManager Events manager.
+     * @return {object} Attributes object.
+     * @private
+     */
+    const expandEvents = (attributes, eventsManager) => {
+        const out = {};
+        Object.keys(attributes).forEach(key => {
+            // Check if key is an event listener.
+            const match = key.match(/on(([A-Z]{1}[a-z]+)+)/);
+
+            if (match && match[1]) {
+                const type = match[1].toLowerCase();
+                const listener = attributes[key];
+                if (listener) {
+                    const index = eventsManager.addListener(listener, type);
+                    // Add event listener index.
+                    out[Component.ATTRIBUTE_EVENT(type)] = index;
+                }
+            } else {
+                // Add attribute.
+                out[key] = attributes[key];
+            }
+        });
+        return out;
+    };
+
+    /**
+     * Replace component tags with expressions.
+     * `<${Component} />` or `<${Component}></${Component}>` will be replaced 
      * by a function that mounts the component.
      * Returns the template with component tags replaced by expressions placeholders 
      * modifies the expressions array adding the mount functions.
      * @param main {string} The main template.
+     * @param {Array<any>} expressions Array of expressions.
+     * @param {boolean} skipNormalization Skip placeholder normalization (for recursive calls).
      * @return {string} The template with components tags replaced by expressions
      * placeholders.
      * @private
      */
-    const expandComponents = (main, expressions) => {
-        const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
-        // Match component tags.
+    const expandComponents = (main, expressions, skipNormalization = false) => {
+        const PH = Component.PLACEHOLDER('(\\d+)');
+        const componentRefMap = new Map();
+        // Normalize component references to use first placeholder index.
+        // Only on first call, not on recursive calls.
+        if (!skipNormalization) {
+            main = main.replace(
+                new RegExp(PH, 'g'),
+                (match, idx) => {
+                    const expression = expressions[idx];
+                    if (expression && expression.prototype instanceof Component) {
+                        if (componentRefMap.has(expression)) {
+                            return componentRefMap.get(expression);
+                        }
+                        componentRefMap.set(expression, match);
+                    }
+                    return match;
+                }
+            );
+        }
+        // Match component tags with backreference to ensure correct pairing.
         return main.replace(
-            new RegExp(`<(${PH})([^>]*)>([\\s\\S]*?)</(${PH})>|<(${PH})([^>]*)/>`,'g'),
-            function() {
-                const { tag, attributes, inner, close, raw } = parseMatch(arguments, expressions);
-                // No component found.
-                if (!(tag.prototype instanceof Component)) return raw;
+            new RegExp(`<(${PH})([^>]*)>([\\s\\S]*?)</\\1>|<(${PH})([^>]*)/>`,'g'),
+            (match, openTag, openIdx, nonVoidAttrs, inner, selfClosingTag, selfClosingIdx, selfClosingAttrs) => {
+                let tag, attributesStr, innerList;
 
-                let renderChildren;
+                if (openTag) {
+                    tag = expressions[openIdx];
+                    attributesStr = nonVoidAttrs;
+                } else {
+                    tag = typeof selfClosingIdx !== 'undefined' ? expressions[selfClosingIdx] : selfClosingTag;
+                    attributesStr = selfClosingAttrs;
+                }
+                // No component found.
+                if (!(tag.prototype instanceof Component)) return match;
                 // Non void component.
-                if (close) {
-                    // Close component tag must match open component tag.
-                    if (tag !== close) return raw;
+                if (openTag) {
+                    // Process inner content same way as partial().
                     // Recursively expand inner components.
-                    const list = splitPlaceholders(expandComponents(inner, expressions), expressions);
-                    // Create renderChildren function.
-                    renderChildren = function() {
-                        return deepFlat(list.map(item => getExpressionResult(item, this)));
-                    };
+                    const innerTemplate = expandComponents(inner, expressions, true);
+                    // Parse partial elements to handle dynamic attributes and events.
+                    const parsedInner = parsePartialElements(innerTemplate, expressions);
+                    // Split into items.
+                    innerList = splitPlaceholders(parsedInner, expressions);
                 }
+                // Parse attributes.
+                const attributes = parseAttributes(attributesStr, expressions);
                 // Create mount function.
                 const mount = function() {
-                    const options = expandAttributes(attributes, value => getExpressionResult(value, this)).all;
-                    // Add renderChildren function to options.
-                    if (renderChildren) options.renderChildren = renderChildren.bind(this);
+                    const options = expandAttributes(attributes, value => getExpressionResult(value, this));
+                    // Add `renderChildren` function to options.
+                    if (innerList) {
+                        // Evaluate items in parent context and create Partial.
+                        options.renderChildren = () => new Partial(innerList.map(item => getExpressionResult(item, this)));
+                    }
                     // Mount component.
                     return tag.mount(options);
                 };
                 // Add mount function to expression.
                 expressions.push(mount);
                 // Replace whole string with expression placeholder.
-                return Component.PLACEHOLDER_EXPRESSION(expressions.length - 1);
+                return Component.PLACEHOLDER(expressions.length - 1);
             }
         );
     };
 
     /**
-     * Parse match data to get tag, attributes, inner html and close tag.
-     * @param match {array}
-     * @return {object}
-     * @property {string} tag The tag.
-     * @property {string} inner The inner html.
-     * @property {string} close The closing tag.
-     * @property {array} attributes Array of attributes as key, value pairs.
-     * @property {string} raw The whole match.
+     * Replace elements in template.
+     * @param {string} template Template string.
+     * @param {Function} replacer Replacer function.
+     * @return {string} Template string with replaced elements.
      * @private
      */
-    const parseMatch = (match, expressions) => {
-        const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
+    const replaceElements = (template, replacer) => {
+        const PH = Component.PLACEHOLDER('(?:\\d+)');
+        return template.replace(
+            new RegExp(`<(${PH}|[a-z]+[1-6]?)(?:\\s*)((?:"[^"]*"|'[^']*'|[^>])*)(/?>)`, 'gi'),
+            replacer
+        );
+    };
 
-        const [all, openTag, openIdx, nonVoidAttrs, inner, closeTag, closeIdx,
-            selfClosingTag, selfClosingIdx, selfClosingAttrs] = match;
+    /**
+     * Parse all HTML elements in template and extract their attributes.
+     * @param {string} template Template string with placeholders.
+     * @param {Array} expressions Array of expressions.
+     * @param {Array} elements Array to store element references.
+     * @return {string} Template with parsed attributes.
+     * @throws {SyntaxError} If the template does not have a single root element or is a container component.
+     * @private
+     */
+    const parseElements = (template, expressions, elements) => {
+        const PH = Component.PLACEHOLDER('(?:\\d+)');
+        // Check if template is a container (single placeholder, no tag).
+        const containerMatch = template.match(new RegExp(`^\\s*${PH}\\s*$`));
+        if (containerMatch) return template;
+        // Validate that template has a root element.
+        const rootElementMatch = template.match(new RegExp(`^\\s*<([a-z]+[1-6]?|${PH})([^>]*)>([\\s\\S]*?)</(\\1|${PH})>\\s*$|^\\s*<([a-z]+[1-6]?|${PH})([^>]*)/>\\s*$`));
+        if (!rootElementMatch) throw new SyntaxError(`Template must have a single root element or be a container component: "${template.trim()}"`);
+
+        let elementUid = 0;
+        // Match all HTML elements including placeholders and self-closed elements.
+        return replaceElements(template, (match, tag, attributesStr, ending) => {
+            const isRoot = elementUid === 0;
+            const currentElementUid = ++elementUid;
+            // If there are no dynamic attributes, return original match.
+            if (!isRoot && !attributesStr.match(new RegExp(PH))) {
+                return match;
+            }
+            // Parse attributes.
+            const parsedAttributes = parseAttributes(attributesStr, expressions);
+            // Create element reference.
+            const generateElementUid = componentUid => `${componentUid}-${currentElementUid}`;
+            // Create function that returns attributes object.
+            const getAttributes = function() {
+                // Expand attributes and events.
+                const attributes = expandEvents(
+                    expandAttributes(parsedAttributes, value => getExpressionResult(value, this)),
+                    this.eventsManager
+                );
+                // Extend template attributes with `options.attributes`.
+                if (isRoot && this.attributes) {
+                    Object.assign(attributes, getResult(this.attributes, this));
+                }
+                // Add data attribute for element identification.
+                // First element gets the component uid, others get element uid.
+                attributes[Component.ATTRIBUTE_ELEMENT] = generateElementUid(this.uid);
+
+                return attributes;
+            };
+
+            const getSelector = function() {
+                return `[${Component.ATTRIBUTE_ELEMENT}="${generateElementUid(this.uid)}"]`;
+            };
+            // Add element reference to elements array.
+            elements.push({
+                getSelector,
+                getAttributes,
+            });
+            // Add new expression to expressions array.
+            expressions.push(function() {
+                const attributes = getAttributes.call(this);
+                return Component.markAsSafeHTML(getAttributesHTML(attributes));
+            });
+            // Replace attributes with placeholder.
+            const placeholder = Component.PLACEHOLDER(expressions.length - 1);
+            // Preserve original tag ending (> or />)
+            return `<${tag} ${placeholder}${ending}`;
+        });
+    };
 
-        const data = { raw : all, attributes : [] };
+    /**
+     * Parse elements in partial template.
+     * @param {string} template Template string with placeholders.
+     * @param {Array} expressions Array of expressions.
+     * @return {string} Template with parsed attributes.
+     * @private
+     */
+    const parsePartialElements = (template, expressions) => {
+        const PH = Component.PLACEHOLDER('(?:\\d+)');
+        // Match all HTML elements including placeholders and self-closed elements.
+        return replaceElements(template, (match, tag, attributesStr, ending) => {
+            // If there are no dynamic attributes, return original match.
+            if (!attributesStr.match(new RegExp(PH))) {
+                return match;
+            }
+            // Parse attributes.
+            const parsedAttributes = parseAttributes(attributesStr, expressions);
+            // Create function that returns attributes object.
+            const getAttributes = function() {
+                const attributes = expandEvents(
+                    expandAttributes(parsedAttributes, value => getExpressionResult(value, this)),
+                    this.eventsManager
+                );
+
+                return attributes;
+            };
+            // Add new expression to expressions array.
+            expressions.push(function() {
+                const attributes = getAttributes.call(this);
+                return Component.markAsSafeHTML(getAttributesHTML(attributes));
+            });
+            // Replace attributes with placeholder.
+            const placeholder = Component.PLACEHOLDER(expressions.length - 1);
+            // Preserve original tag ending (> or />)
+            return `<${tag} ${placeholder}${ending}`;
+        });
+    };
 
-        let attributesStr;
-        if (openTag) {
-            // Non void element.
-            data.tag = typeof openIdx !== 'undefined' ? expressions[openIdx] : openTag;
-            data.inner = inner;
-            data.close = typeof closeIdx !== 'undefined' ? expressions[closeIdx] : closeTag;
-            attributesStr = nonVoidAttrs;
-        } else {
-            // Self closing element.
-            data.tag = typeof selfClosingIdx !== 'undefined' ? expressions[selfClosingIdx] : selfClosingTag;
-            attributesStr = selfClosingAttrs;
-        }
-        // Parse attributes.
+    /**
+     * Parse all interpolations in template text content.
+     * @param {string} template Template string with placeholders.
+     * @param {Array} expressions Array of expressions.
+     * @param {Array} interpolations Array to store interpolation references.
+     * @return {string} Template with interpolation markers.
+     * @private
+     */
+    const parseInterpolations = (template, expressions, interpolations) => {
+        const PH = Component.PLACEHOLDER('(\\d+)');
+        let interpolationUid = 0;
+        // Match all expression placeholders.
+        return template.replace(
+            new RegExp(PH, 'g'),
+            function(match, expressionIndex, offset) {
+                // Check if this placeholder is inside an element tag (attribute).
+                // `offset` is the index of the match in the original string.
+                const beforeMatch = template.substring(0, offset);
+                const lastOpenTag = beforeMatch.lastIndexOf('<');
+                const lastCloseTag = beforeMatch.lastIndexOf('>');
+                // If we're inside an element tag, don't process as interpolation.
+                if (lastOpenTag > lastCloseTag) {
+                    return match;
+                }
+
+                const currentInterpolationUid = ++interpolationUid;
+
+                function getStart() {
+                    return Component.MARKER_START(`${this.uid}-${currentInterpolationUid}`);
+                }
+                function getEnd() {
+                    return Component.MARKER_END(`${this.uid}-${currentInterpolationUid}`);
+                }
+                // Add interpolation reference to interpolations array.
+                interpolations.push({
+                    getStart,
+                    getEnd,
+                    expression : expressions[expressionIndex]
+                });
+                // Add new expression to expressions array.
+                expressions.push(function() {
+                    const result = getExpressionResult(expressions[expressionIndex], this);
+                    const uid = `${this.uid}-${currentInterpolationUid}`;
+                    return new InterpolationWrapper(uid, result);
+                });
+                // Replace with new placeholder.
+                return Component.PLACEHOLDER(expressions.length - 1);
+            }
+        );
+    };
+
+    /**
+     * Parse attributes string to extract dynamic attributes.
+     * @param {string} attributesStr Attributes string from HTML element.
+     * @param {Array} expressions Array of expressions.
+     * @return {Array} Array of attribute pairs [key, value] or [key, value, hasQuotes].
+     * @private
+     */
+    const parseAttributes = (attributesStr, expressions) => {
+        const PH = Component.PLACEHOLDER('(\\d+)');
+        const attributes = [];
+        // Parse attributes string with support for placeholders in both names and values.
         const regExp = new RegExp(`(${PH}|[\\w-]+)(?:=(["']?)(?:${PH}|((?:.?(?!["']?\\s+(?:\\S+)=|\\s*/?[>"']))+.))\\3)?`, 'g');
 
         let attributeMatch;
         while ((attributeMatch = regExp.exec(attributesStr)) !== null) {
-            const [, attribute, attributeIdx,, valueIdx, value] = attributeMatch;
+            const [, attribute, attributeIdx, quotes, valueIdx, value] = attributeMatch;
 
-            const attr = typeof attributeIdx !== 'undefined' ? expressions[attributeIdx] : attribute;
-            const val = typeof valueIdx !== 'undefined' ? expressions[valueIdx] : value;
+            const attr = typeof attributeIdx !== 'undefined' ? expressions[parseInt(attributeIdx, 10)] : attribute;
+            const val = typeof valueIdx !== 'undefined' ? expressions[parseInt(valueIdx, 10)] : value;
 
             if (typeof val !== 'undefined') {
-                data.attributes.push([attr, val]);
+                attributes.push([attr, val, !!quotes]);
             } else {
-                data.attributes.push([attr]);
+                attributes.push([attr]);
             }
         }
 
-        return data;
-    };
-
-    /*
-     * HTML tags that are self closing.
-     */
-    const selfClosingTags = {
-        area : true, base : true, br : true, col : true, embed : true, hr : true, 
-        img : true, input : true, link : true, meta : true, source : true, track : true, wbr : true
+        return attributes;
     };
 
     /*
      * These option keys will be extended on the component instance.
      */
-    const componentOptions = ['key', 'state', 'onCreate', 'onChange', 'onRender'];
+    const componentOptions = ['key', 'state', 'onCreate', 'onChange', 'onHydrate', 'onRecycle', 'onUpdate'];
 
     /**
-     * Components are a special kind of `View` that is designed to be easily composable, 
-     * making it simple to add child views and build complex user interfaces.  
-     * Unlike views, which are render-agnostic, components have a specific set of rendering 
-     * guidelines that allow for a more declarative development style.  
-     * Components are defined with the {@link #module_component_create Component.create} static method, which takes a tagged template string or a function that returns another component.
-     * @module
-     * @extends Rasti.View
-     * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onRender, onCreate, onChange.
-     * @property {string} key A unique key to identify the component. Used to recycle child components.
-     * @property {object} model A `Rasti.Model` or any emitter object containing data and business logic. The component will listen to `change` events and call `onChange` lifecycle method.
-     * @property {object} state A `Rasti.Model` or any emitter object containing data and business logic, to be used as internal state. The component will listen to `change` events and call `onChange` lifecycle method.
-     * @see {@link #module_component_create Component.create}
-     * @example
-     * import { Component, Model } from 'rasti';
-     * // 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);
+     * @lends module:Component
      */
     class Component extends View {
         constructor(options = {}) {
             super(...arguments);
+            this.componentOptions = [];
             // Extend "this" with options.
             componentOptions.forEach(key => {
-                if (key in options) this[key] = options[key];
+                if (key in options) {
+                    this[key] = options[key];
+                    this.componentOptions.push(key);
+                }
             });
+            // Extract props from options that aren't component or view options.
+            const props = {};
+            Object.keys(options).forEach(key => {
+                if (!this.viewOptions.includes(key) && !this.componentOptions.includes(key)) {
+                    props[key] = options[key];
+                }
+            });
+            // Store props as Model for reactive updates.
+            this.props = new Model(props);
             // Store options by default.
             this.options = options;
             // Bind `partial` method to `this`.
             this.partial = this.partial.bind(this);
+            // Bind `onChange` method to `this`.
+            this.onChange = this.onChange.bind(this);
             // Call lifecycle method.
             this.onCreate.apply(this, arguments);
         }
 
         /**
-         * Listen to `change` event on a model or emitter object and call `onChange` lifecycle method.
-         * The listener will be removed when the component is destroyed.
-         * By default the component will be subscribed to `this.model` and `this.state`.
-         * @param {Rasti.Model} model A model or emitter object to listen to changes.
-         * @return {Rasti.Component} The component instance.
+         * Get events object for automatic event delegation, based on data attributes.
+         * @return {object} The events object.
+         * @private
          */
-        subscribe(model) {
-            // Check if model has `on` method.
-            if (!model.on) return;
-            // Store bound onChange method.
-            const onChange = this.onChange.bind(this);
-            // Listen to model changes and store unbind function.
-            const off = model.on('change', onChange);
-            // Add unbind function to destroy queue.
-            // So the component stops listening to model changes when destroyed.
-            this.destroyQueue.push(
-                // Rasti `on` method returns an unbind function.
-                // But other libraries may return the object itself.
-                typeof off === 'function' ? off : () => model.off('change', onChange)
-            );
+        events() {
+            const events = {};
+            // Create events object.
+            this.eventsManager.types.forEach(type => {
+                const dataAttribute = Component.ATTRIBUTE_EVENT(type);
+                // Create a listener function that gets the listener index from the data attribute and calls the listener.
+                const listener = function(event, component, matched) {
+                    // Get the listener index from the data attribute.
+                    const index = matched.getAttribute(dataAttribute);
+                    // Root element listener may not have a data attribute.
+                    if (index) {
+                        let currentListener = this.eventsManager.listeners[parseInt(index, 10)];
+                        if (typeof currentListener === 'string') currentListener = this[currentListener];
+                        validateListener(currentListener);
+                        // Call the listener.
+                        currentListener.call(this, event, component, matched);
+                    }
+                };
+                // Add an event listener to the events object for each event type, using the data attribute
+                // as both a CSS selector and to store the listener's index.
+                events[`${type} [${dataAttribute}]`] = listener;
+                // Add an event listener to the events object for each event type that matches the root element.
+                events[type] = listener;
+            });
 
+            return events;
+        }
+
+        /**
+         * Subscribes to a `change` event on a model or emitter object and invokes the `onChange` lifecycle method.
+         * The subscription is automatically cleaned up when the component is destroyed.
+         * By default, the component subscribes to changes on `this.model`, `this.state`, and `this.props`.
+         * 
+         * @param {Object} model - The model or emitter object to listen to.
+         * @param {string} [type='change'] - The event type to listen for.
+         * @param {Function} [listener=this.onChange] - The callback to invoke when the event is emitted.
+         * @returns {Component} The current component instance for chaining.
+         */
+        subscribe(model, type = 'change', listener = this.onChange) {
+            // Check if model has `on` method.
+            if (model.on) this.listenTo(model, type, listener);
             return this;
         }
 
@@ -985,7 +2085,7 @@
          * @private
          */
         isContainer() {
-            return !!(!this.tag && this.template);
+            return this.template.elements.length === 0 && this.template.interpolations.length === 1;
         }
 
         /**
@@ -994,134 +2094,107 @@
          * @private
          */
         ensureElement() {
+            // Store data event listeners.
+            this.eventsManager = new EventsManager();
+            // Store position tracking for recycling.
+            this.pathManager = new PathManager();
+            // Call template function.
+            this.template = getResult(this.template, this);
             // If el is provided, delegate events.
             if (this.el) {
                 // If "this.el" is a function, call it to get the element.
                 this.el = getResult(this.el, this);
-                this.delegateEvents();
+                // Render the component as a string to generate children components.
+                this.toString();
+                // Hydrate the component.
+                this.hydrate(this.el.parentNode);
             }
         }
 
-        /**
-         * Locate the root element of the `Component` within a specified parent node.
-         * This is achieved by searching for the element using the unique data attribute assigned to the `Component`.
-         * @param {Node} parent - The parent node to search within.
-         * @return {Node} The root element of the component, or `null` if not found.
-         * @private
-         */
-        findElement(parent) {
-            return (parent || document).querySelector(`[${Component.DATA_ATTRIBUTE_UID}="${this.uid}"]`);
-        }
-
-        /**
-         * Retrieve the attributes to be applied to the element.
-         * This includes attributes to be added, removed, and their HTML representation.
-         * @return {object} An object containing the following properties:
-         * @property {object} add - Attributes to be added to the element, with their values.
-         * @property {object} remove - Attributes to be removed from the element.
-         * @property {string} html - A string representation of the attributes for use in HTML.
-         * @private
-         */
-        getAttributes() {
-            const add = {};
-            const remove = {};
-            const html = [];
-
-            const attributes = { [Component.DATA_ATTRIBUTE_UID] : this.uid };
-
-            if (this.attributes) Object.assign(attributes, getResult(this.attributes, this));
-            // Store previous attributes.
-            const previousAttributes = this.previousAttributes || {};
-            this.previousAttributes = attributes;
-
-            Object.keys(attributes).forEach(key => {
-                let value = attributes[key];
-                // Transform bool attribute values
-                if (value === false) {
-                    remove[key] = true;
-                } else if (value === true) {
-                    add[key] = '';
-                    html.push(key);
-                } else {
-                    if (value === null || typeof value === 'undefined') value = '';
-
-                    add[key] = value;
-                    html.push(`${Component.sanitize(key)}="${Component.sanitize(value)}"`);
-                }
-            });
-            // Remove attributes that were in previousAttributes but not in current attributes.
-            Object.keys(previousAttributes).forEach(key => {
-                if (!(key in attributes)) {
-                    remove[key] = true;
-                }
-            });
-
-            return { add, remove, html : html.join(' ') };
-        }
-
         /**
          * Used internally on the render process.
          * Attach the `Component` to the dom element providing `this.el`, delegate events, 
-         * subscribe to model changes and call `onRender` lifecycle method with `Component.RENDER_TYPE_HYDRATE` as argument.
+         * subscribe to model changes and call `onHydrate` lifecycle method.
          * @param parent {node} The parent node.
-         * @return {Rasti.Component} The component instance.
+         * @return {Component} The component instance.
          * @private
          */
         hydrate(parent) {
-            // Listen to model changes and call onChange.
-            if (this.model) this.subscribe(this.model);
-            // Listen to state changes and call onChange.
-            if (this.state) this.subscribe(this.state);
+            ['model', 'state', 'props'].forEach(key => {
+                if (this[key]) this.subscribe(this[key]);
+            });
 
             if (this.isContainer()) {
+                // Get references for interpolation marker comments
+                this.template.interpolations[0].hydrate(parent);
+                // Call hydrate on children.
                 this.children[0].hydrate(parent);
+                // Set the first element as the component's element.
                 this.el = this.children[0].el;
             } else {
-                this.el = this.findElement(parent);
+                // Search for every element in template using getSelector
+                this.template.elements.forEach((element, index) => { 
+                    if (index === 0) {
+                        element.hydrate(parent);
+                        if (this.el) element.ref = this.el;
+                        else this.el = element.ref;
+                    }
+                    else {
+                        element.hydrate(this.el);
+                    }
+                });
+                // Delegate events.
                 this.delegateEvents();
+                // Get references for interpolation marker comments
+                this.template.interpolations.forEach(interpolation => interpolation.hydrate(this.el));
                 this.children.forEach(child => child.hydrate(this.el));
             }
-            // Call `onRender` lifecycle method.
-            this.onRender.call(this, Component.RENDER_TYPE_HYDRATE);
+            // Call `onHydrate` lifecycle method.
+            this.onHydrate.call(this);
             // Return `this` for chaining.
             return this;
         }
 
         /**
-         * Used internally on the render process.
-         * Reuse a `Component` that has `key` when its parent is rendered.
-         * Call `onRender` lifecycle method with `Component.RENDER_TYPE_RECYCLE` as argument.
-         * @param parent {node} The parent node.
-         * @return {Rasti.Component} The component instance.
+         * Get a `comment` marker with same data attribute as this component.
+         * Used to replace the component when it is recycled.
+         * @return {string} The recycle placeholder.
          * @private
          */
-        recycle(parent) {
-            // If component is a container, call recycle on its child.
-            if (this.isContainer()) {
-                this.children[0].recycle(parent);
-            } else {
-                // Find placeholder element to be replaced. It has same data attribute as this component.
-                const toBeReplaced = this.findElement(parent);
-                // Replace it with this.el.
-                toBeReplaced.replaceWith(this.el);
-            }
-            // Call `onRender` lifecycle method.
-            this.onRender.call(this, Component.RENDER_TYPE_RECYCLE);
-            // Return `this` for chaining.
-            return this;
+        getRecycledMarker() {
+            return `<!--${Component.MARKER_RECYCLED(this.uid)}-->`;
         }
 
         /**
-         * Destroy the `Component`.
-         * Destroy children components if any, undelegate events, stop listening to events, call `onDestroy` lifecycle method.
-         * @param {object} options Options object or any arguments passed to `destroy` method will be passed to `onDestroy` method.
-         * @return {Rasti.View} Return `this` for chaining.
+         * Get the component nodes to be inserted into the DOM.
+         * Used internally during the render process, you usually don't need to call it if you use
+         * `mount()`.
+         * For components that render HTML elements you can safely rely on `this.el`.
+         * For container components that render another component you need the wrapper nodes to insert
+         * them into the DOM; use `getNodes()` for that.
+         * @return {Node[]} The component nodes.
          */
-        destroy() {
-            // Call super destroy method.
-            super.destroy.apply(this, arguments);
-            // Set destroyed flag to prevent a last render after destroyed.
-            this.destroyed = true;
+        getNodes() {
+            return this.isContainer() ?
+                [this.template.interpolations[0].ref[0], ...this.children[0].getNodes(), this.template.interpolations[0].ref[1]] :
+                [this.el];
+        }
+
+        /**
+         * Used internally on the render process.
+         * Reuse a `Component` by replacing the placeholder comment with the real nodes.
+         * Call `onRecycle` lifecycle method.
+         * @param parent {node} The parent node.
+         * @return {Component} The component instance.
+         * @private
+         */
+        recycle(parent) {
+            // Locate the placeholder comment and replace it with the real nodes
+            const toBeReplaced = findComment(parent, Component.MARKER_RECYCLED(this.uid), isComponent);
+            // Replace it with this.el.
+            toBeReplaced.replaceWith(...this.getNodes());
+            // Call `onRecycle` lifecycle method.
+            this.onRecycle.call(this);
             // Return `this` for chaining.
             return this;
         }
@@ -1147,16 +2220,22 @@
         }
 
         /**
-         * Lifecycle method. Called after the component is rendered.
-         * - When the component is rendered for the first time, this method is called with `Component.RENDER_TYPE_HYDRATE` as the argument.
-         * - When the component is updated or re-rendered, this method is called with `Component.RENDER_TYPE_RENDER` as the argument.
-         * - When the component is recycled (reused with the same key), this method is called with `Component.RENDER_TYPE_RECYCLE` as the argument.
-         * @param {string} type - The render type. Possible values are: `Component.RENDER_TYPE_HYDRATE`, `Component.RENDER_TYPE_RENDER` and `Component.RENDER_TYPE_RECYCLE`.
+         * Lifecycle method. Called when the component is rendered for the first time and hydrated.
          */
-        onRender() {}
+        onHydrate() {}
 
         /**
-         * Lifecycle method. Called when the view is destroyed.
+         * Lifecycle method. Called when the component is recycled (reused with the same key) and added to the DOM again.
+         */
+        onRecycle() {}
+
+        /**
+         * Lifecycle method. Called when the component is updated or re-rendered.
+         */
+        onUpdate() {}
+
+        /**
+         * Lifecycle method. Called when the component is destroyed.
          * @param {object} options Options object or any arguments passed to `destroy` method.
          */
         onDestroy() {}
@@ -1164,18 +2243,18 @@
         /**
          * Tagged template helper method.
          * Used to create a partial template.  
-         * It will return a one-dimensional array with strings and expressions.  
+         * It will return a Partial object that preserves structure for position-based recycling.
          * Components will be added as children by the parent component. Template strings literals 
          * will be marked as safe HTML to be rendered.
          * This method is bound to the component instance by default.
          * @param {TemplateStringsArray} strings - Template strings.
          * @param  {...any} expressions - Template expressions.
-         * @return {Array} Array containing strings and expressions.
+         * @return {Partial} Partial object containing strings and expressions.
          * @example
          * import { Component } from 'rasti';
          * // Create a Title component.
          * const Title = Component.create`
-         *     <h1>${self => self.renderChildren()}</h1>
+         *     <h1>${({ props }) => props.children}</h1>
          * `;
          * // Create Main component.
          * const Main = Component.create`
@@ -1195,147 +2274,191 @@
          * });
          */
         partial(strings, ...expressions) {
-            return deepFlat(
-                splitPlaceholders(
-                    expandComponents(addPlaceholders(strings, expressions), expressions), expressions
-                ).map(item => getExpressionResult(item, this))
-            );
+            const items = splitPlaceholders(
+                parsePartialElements(
+                    expandComponents(
+                        addPlaceholders(strings, expressions),
+                        expressions
+                    ),
+                    expressions
+                ),
+                expressions
+            ).map(item => getExpressionResult(item, this));
+
+            return new Partial(items);
         }
 
-        getRecyclePlaceholder() {
-            if (this.isContainer()) return this.children[0].getRecyclePlaceholder();
-            
-            const tag = getResult(this.tag, this) || 'div';
-            const attributes = `${Component.DATA_ATTRIBUTE_UID}="${this.uid}"`;
+        /**
+         * Render a template part.
+         * @param {any} part - The template part.
+         * @param {function} addChild - The addChild function.
+         * @return {string} The rendered template part.
+         * @private
+         */
+        renderTemplatePart(part, addChild) {
+            const result = getExpressionResult(part, this);
+
+            const parse = item => {
+                if (typeof item !== 'undefined' && item !== null && item !== false && item !== true) {
+                    if (item instanceof SafeHTML) return item;
+                    if (item instanceof Component) return addChild(item);
+
+                    if (item instanceof Partial) {
+                        this.pathManager.push();
+                        const out = item.items.map(subItem => { this.pathManager.increment(); return parse(subItem); }).join('');
+                        this.pathManager.pop();
+                        return out;
+                    }
+                    // Handle arrays (user loops) - disable tracking.
+                    if (Array.isArray(item)) {
+                        this.pathManager.pause();
+                        const out = deepFlat(item).map(parse).join('');
+                        this.pathManager.resume();
+                        return out;
+                    }
+                    // InterpolationWrapper: add markers and process maintaining tracking.
+                    if (item instanceof InterpolationWrapper) {
+                        this.pathManager.increment();
+                        const startMarker = `<!--${Component.MARKER_START(item.interpolationUid)}-->`;
+                        const endMarker = `<!--${Component.MARKER_END(item.interpolationUid)}-->`;
+                        return `${startMarker}${parse(item.result)}${endMarker}`;
+                    }
+
+                    return Component.sanitize(item);
+                }
+                // Return empty string if item is undefined, null, false, or true.
+                return '';
+            };
 
-            return this.template || !selfClosingTags[tag] ?
-                `<${tag} ${attributes}></${tag}>` :
-                `<${tag} ${attributes} />`;
+            return `${parse(result)}`;
         }
 
-        /*
-         * Treat the whole view as a HTML string.
+        /**
+         * Render the component as a string.
+         * Used internally on the render process.
+         * Use it for server-side rendering or static site generation.
+         * @return {string} The rendered component.
          */
         toString() {
             // Normally there won't be any children, but if there are, destroy them.
             this.destroyChildren();
-            // Container.
-            if (this.isContainer()) return this.template.call(this, this.addChild.bind(this));
-            // Get tag name.
-            const tag = getResult(this.tag, this) || 'div';
-            // Get attributes.
-            const attributes = this.getAttributes().html;
-            // Replace expressions of inner template.
-            const inner = this.template ? this.template.call(this, this.addChild.bind(this)) : '';
-            // Generate outer template.
-            return this.template || !selfClosingTags[tag] ?
-                `<${tag} ${attributes}>${inner}</${tag}>` :
-                `<${tag} ${attributes} />`;
+            // Normally there won't be any data event listeners, but if there are, clear them.
+            this.eventsManager.reset();
+            // Reset position tracking.
+            this.pathManager.reset();
+            // Bind addChild method.
+            const addChild = component => {
+                this.pathManager.track(component);
+                return this.addChild(component);
+            };
+            // Render the template parts.
+            return this.template.parts
+                .map(part => this.renderTemplatePart(part, addChild))
+                .join('');
         }
 
         /**
          * Render the `Component`.  
-         * - If `this.el` is not present, the `Component` will be rendered as a string inside a `DocumentFragment` and hydrated, making `this.el` available. The `onRender` lifecycle method will be called with `Component.RENDER_TYPE_HYDRATE` as an argument.  
-         * - If `this.el` is present, the method will update the attributes and inner HTML of the element, or recreate its child component in the case of a container. The `onRender` lifecycle method will be called with `Component.RENDER_TYPE_RENDER` as an argument.  
-         * - When rendering child components, if the new children have the same key as the previous ones, they will be recycled. A recycled `Component` will call the `onRender` lifecycle method with `Component.RENDER_TYPE_RECYCLE` as an argument.  
+         * - If `this.el` is not present, the `Component` will be rendered as a string inside a `DocumentFragment` and hydrated, making `this.el` available. The `onHydrate` lifecycle method will be called.  
+         * - If `this.el` is present, the method will update the attributes and inner HTML of the element, or recreate its child component in the case of a container. The `onUpdate` lifecycle method will be called.  
+         * - When rendering child components, recycling happens in two ways:
+         *   - Components with a `key` are recycled if a previous child with the same key exists.
+         *   - Unkeyed components are recycled if they have the same type and position in the template or partial.
+         *   A recycled `Component` will call the `onRecycle` lifecycle method.  
          * - If the active element is inside the component, it will retain focus after the render.  
-         * @return {Rasti.Component} The component instance.
+         * @return {Component} The component instance.
          */
         render() {
             // Prevent a last re render if view is already destroyed.
             if (this.destroyed) return this;
             // If `this.el` is not present, render the view as a string and hydrate it.
             if (!this.el) {
-                const fragment = this.createElement('template');
-                fragment.innerHTML = this;
-                this.hydrate(fragment.content);
+                const fragment = parseHTML(this);
+                this.hydrate(fragment);
                 return this;
             }
-            // Update attributes.
-            if (!this.isContainer()) {
-                const attributes = this.getAttributes();
-                // Remove attributes.
-                Object.keys(attributes.remove).forEach(key => {
-                    this.el.removeAttribute(key);
-                });
-                // Add attributes.
-                Object.keys(attributes.add).forEach(key => {
-                    this.el.setAttribute(key, attributes.add[key]);
-                });
-            }
-            // Check for `template` to see if view has innerHTML or a child component.
-            if (this.template) {
-                // Store active element.
-                const activeElement = document.activeElement;
-
+            // Clear event listeners.
+            this.eventsManager.reset();
+            // Reset position tracking.
+            this.pathManager.reset();
+            // Store active element.
+            const activeElement = this.isContainer() ? null : document.activeElement;
+            // Update elements.
+            this.template.elements.forEach(element => element.update());
+            // Store previous children.
+            const previousChildren = this.children;
+            // Clear current children.
+            this.children = [];
+            // Update interpolations.
+            this.template.interpolations.forEach(interpolation => {
                 const nextChildren = [];
                 const recycledChildren = [];
 
-                const previousChildren = this.children;
-                this.children = [];
-                // Replace expressions. Set html inside of `this.el`.
-                const inner = this.template.call(this, component => {
+                this.pathManager.increment();
+
+                const addChild = component => {
                     let out = component;
-                    // Check if child already exists.
-                    const found = component.key && previousChildren.find(
-                        previousChild => previousChild.key === component.key
-                    );
+                    let found = null;
+                    // Check if child already exists by key.
+                    if (component.key) {
+                        found = previousChildren.find(prev => prev.key === component.key);
+                    } else {
+                        // Find by position and type.
+                        found = this.pathManager.findRecyclable(component.constructor);
+                    }
 
                     if (found) {
                         // If child already exists, replace it html by its root element.
-                        out = found.getRecyclePlaceholder();
+                        out = found.getRecycledMarker();
                         // Add child to recycled children.
-                        recycledChildren.push(found);
-                        // Destroy new child component. Use recycled one instead.
-                        component.destroy();
+                        recycledChildren.push([found, component]);
+                        // Track the component.
+                        if (!found.key) this.pathManager.track(found);
                     } else {
-                        // Not found. Add new child component.
+                        // Add new component.
                         nextChildren.push(component);
+                        // Track the component.
+                        this.pathManager.track(component);
                     }
-                    // Component html.
+                    // Return the component or placeholder.
                     return out;
-                });
+                };
 
-                if (this.isContainer()) {
-                    if (nextChildren[0]) {
-                        const fragment = this.createElement('template');
-                        fragment.innerHTML = inner;
-                        // Add new child to dom fragment and hydrate it.
-                        this.addChild(nextChildren[0]).hydrate(fragment.content);
-                        // Get next child element.
-                        const nextEl = fragment.content.children[0];
-                        // Replace `this.el` with nextEl.
-                        this.el.replaceWith(nextEl);
-                        // Set `this.el` to nextEl.
-                        this.el = nextEl;
-                    } else if (recycledChildren[0]) {
-                        this.addChild(recycledChildren[0]);
-                    } else {
-                        throw new Error('Container component must have a child component');
-                    }
-                } else {
-                    this.el.innerHTML = inner;
-                    // Add new children. Hydrate them.
-                    nextChildren.forEach(nextChild => {
-                        this.addChild(nextChild).hydrate(this.el);
-                    });
-                    // Replace children root elements with recycled components.
-                    recycledChildren.forEach(recycledChild => {
-                        this.addChild(recycledChild).recycle(this.el);
-                    });
-                }
-                // Destroy unused children.
-                previousChildren.forEach(previousChild => {
-                    const found = recycledChildren.indexOf(previousChild) > -1;
-                    if (!found) previousChild.destroy();
+                const fragment = parseHTML(this.renderTemplatePart(interpolation.expression, addChild));
+                // Replace children root elements with recycled components.
+                recycledChildren.forEach(([recycled, discarded]) => {
+                    this.addChild(recycled).recycle(fragment);
+                    // Update props.
+                    recycled.props.set(discarded.props.toJSON());
+                    // Destroy discarded component.
+                    discarded.destroy();
                 });
-                // Restore focus.
-                if (this.el.contains(activeElement)) {
-                    activeElement.focus();
+                // Add new children. Hydrate them.
+                nextChildren.forEach(child => {
+                    this.addChild(child).hydrate(fragment);
+                });
+
+                interpolation.update(fragment);
+            });
+            // Destroy unused children.
+            previousChildren.forEach(prev => {
+                if (this.children.indexOf(prev) < 0) prev.destroy();
+            });
+            // If container, set el to the child element.
+            if (this.isContainer()) {
+                this.el = this.children[0].el;
+            } else {
+                // If there are pending event types, delegate events again.
+                if (this.eventsManager.hasPendingTypes()) {
+                    this.delegateEvents();
                 }
             }
-            // Call onRender lifecycle method.
-            this.onRender.call(this, Component.RENDER_TYPE_RENDER);
+            // Restore focus.
+            if (activeElement && this.el.contains(activeElement)) {
+                activeElement.focus();
+            }
+            // Call onUpdate lifecycle method.
+            this.onUpdate.call(this);
             // Return this for chaining.
             return this;
         }
@@ -1348,7 +2471,7 @@
          * Be sure that the string is safe to be rendered, as it will be inserted into the DOM without any sanitization.
          * @static
          * @param {string} value 
-         * @return {Rasti.SafeHTML} A safe HTML object.
+         * @return {SafeHTML} A safe HTML object.
          */
         static markAsSafeHTML(value) {
             return new SafeHTML(value);
@@ -1357,7 +2480,7 @@
         /**
          * Helper method used to extend a `Component`, creating a subclass.
          * @static
-         * @param {object} object Object containing methods to be added to the new `Component` subclass. Also can be a function that receives the parent prototype and returns an object.
+         * @param {object|Function} object Object containing methods to be added to the new `Component` subclass. Also can be a function that receives the parent prototype and returns an object.
          */
         static extend(object) {
             const Current = this;
@@ -1378,27 +2501,28 @@
          * appends its element into the DOM (if `el` is provided).
          * And returns the view instance.
          * @static
-         * @param {object} options The view options.
-         * @param {node} el Dom element to append the view element.
-         * @param {boolean} hydrate If true, the view will hydrate existing DOM.
-         * @return {Rasti.Component}
+         * @param {object} [options] The view options.
+         * @param {node} [el] Dom element to append the view element.
+         * @param {boolean} [hydrate] If true, the view will hydrate existing DOM.
+         * @return {Component} The component instance.
          */
         static mount(options, el, hydrate) {
-            // Instantiate view.
-            const view = new this(options);
+            // Instantiate component.
+            const component = new this(options);
             // If `el` is passed, mount component.
             if (el) {
                 if (hydrate) {
+                    // Generate subcomponents.
+                    component.toString();
                     // Hydrate existing DOM.
-                    view.toString();
-                    view.hydrate(el);
+                    component.hydrate(el);
                 } else {
                     // Append element to the DOM.
-                    el.appendChild(view.render().el);
+                    el.append(...component.render().getNodes());
                 }
             }
-            // Return view instance.
-            return view;
+            // Return component instance.
+            return component;
         }
 
         /**
@@ -1411,16 +2535,45 @@
          * - Template interpolations that are functions will be evaluated during the render process, receiving the view instance as an argument and being bound to it. If the function returns `null`, `undefined`, `false`, or an empty string, the interpolation won't render any content.
          *   ```javascript
          *   const Button = Component.create`
-         *       <button class="${({ options }) => options.className}">
-         *           ${({ options }) => options.renderChildren()}
+         *       <button class="${({ props }) => props.className}">
+         *           ${({ props }) => props.children}
          *       </button>
          *   `;
          *   ```
-         * - Event handlers should be passed, at the root element as camelized attributes, in the format `onEventName=${{'selector' : listener }}`. They will be transformed to an event object and delegated to the root element. See {@link #module_view__delegateevents View.delegateEvents}. 
+         * - Attach DOM event handlers per element using camel-cased attributes.
+         *   Event handlers are automatically bound to the component instance (`this`).
+         *   Internally, Rasti uses event delegation to the component's root element for performance.
+         *   
+         *   **Attribute Quoting:**
+         *   - **Quoted attributes** (`onClick="${handler}"`) evaluate the expression first, useful for dynamic values
+         *   - **Unquoted attributes** (`onClick=${handler}`) pass the function reference directly
+         *   
+         *   **Listener Signature:** `(event, component, matched)`
+         *   - `event`: The native DOM event object
+         *   - `component`: The component instance (same as `this`)
+         *   - `matched`: The element that matched the event (useful for delegation)
+         *   
+         *   ```javascript
+         *   const Button = Component.create`
+         *       <button 
+         *           onClick=${function(event, component, matched) {
+         *               // this === component
+         *               console.log('Button clicked:', matched);
+         *           }}
+         *           onMouseOver="${({ model }) => () => model.isHovered = true}"
+         *           onMouseOut="${({ model }) => () => model.isHovered = false}"
+         *       >
+         *           Click me
+         *       </button>
+         *   `;
+         *   ```
+         *   
+         *   If you need custom delegation (e.g., `{'click .selector': 'handler'}`), 
+         *   you may override the `events` property as described in {@link #module_view__delegateevents View.delegateEvents}.
          * - Boolean attributes should be passed in the format `attribute="${() => true}"`. `false` attributes won't be rendered. `true` attributes will be rendered without a value.
          *   ```javascript
          *   const Input = Component.create`
-         *       <input type="text" disabled=${({ options }) => options.disabled} />
+         *       <input type="text" disabled=${({ props }) => props.disabled} />
          *   `;
          *   ```
          * - If the interpolated function returns a component instance, it will be added as a child component.
@@ -1429,21 +2582,21 @@
          *   // Create a button component.
          *   const Button = Component.create`
          *       <button class="button">
-         *           ${({ options }) => options.renderChildren()}
+         *           ${({ props }) => props.children}
          *       </button>
          *   `;
          *   // Create a navigation component. Add buttons as children. Iterate over items.
          *   const Navigation = Component.create`
          *       <nav>
-         *           ${({ options }) => options.items.map(
-         *               item => Button.mount({ renderChildren: () => item.label })
+         *           ${({ props }) => props.items.map(
+         *               item => Button.mount({ children : item.label })
          *           )}
          *       </nav>
          *   `;
          *   // Create a header component. Add navigation as a child.
          *   const Header = Component.create`
          *       <header>
-         *           ${({ options }) => Navigation.mount({ items : options.items})}
+         *           ${({ props }) => Navigation.mount({ items : props.items})}
          *       </header>
          *   `;
          *   ```
@@ -1452,13 +2605,13 @@
          *   // Create a button component.
          *   const Button = Component.create`
          *       <button class="button">
-         *            ${({ options }) => options.renderChildren()}
+         *            ${({ props }) => props.children}
          *       </button>
          *   `;
          *   // Create a navigation component. Add buttons as children. Iterate over items.
          *   const Navigation = Component.create`
          *       <nav>
-         *           ${({ options, partial }) => options.items.map(
+         *           ${({ props, partial }) => props.items.map(
          *               item => partial`<${Button}>${item.label}</${Button}>`
          *           )}
          *       </nav>
@@ -1466,7 +2619,7 @@
          *   // Create a header component. Add navigation as a child.
          *   const Header = Component.create`
          *       <header>
-         *           <${Navigation} items="${({ options }) => options.items}" />
+         *           <${Navigation} items="${({ props }) => props.items}" />
          *       </header>
          *   `;
          *   ```
@@ -1474,8 +2627,8 @@
          *   ```javascript
          *   // Create a button component.
          *   const Button = Component.create`
-         *       <button class="${({ options }) => options.className}">
-         *           ${self => self.renderChildren()}
+         *       <button class="${({ props }) => props.className}">
+         *           ${({ props }) => props.children}
          *       </button>
          *   `;
          *   // Create a container that renders a Button component.
@@ -1484,107 +2637,113 @@
          *   `;
          *   // Create a container that renders a Button component, using a function.
          *   const ButtonCancel = Component.create(() => Button.mount({
-         *       className: 'cancel',
-         *       renderChildren: () => 'Cancel'
+         *       className : 'cancel',
+         *       children : 'Cancel'
          *   }));
          *   ```
          * @static
-         * @param {string|function} strings - HTML template for the component or a function that mounts a sub component.
+         * @param {string|Function} strings - HTML template for the component or a function that mounts a sub component.
          * @param {...*} expressions - The expressions to be interpolated within the template.
-         * @return {Rasti.Component} The newly created component class.
+         * @return {Component} The newly created component class.
          */
         static create(strings, ...expressions) {
-            const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
             // Containers can be created using create as a functions instead of a tagged template.
             if (typeof strings === 'function') {
                 expressions = [strings];
                 strings = ['', ''];
             }
-
-            let tag, attributes, events, template;
-            // Create output string for main template. Add placeholders for new lines.
-            const main = expandComponents(addPlaceholders(strings, expressions), expressions);
-
-            let match = main.match(
-                new RegExp(`^\\s*<([a-z]+[1-6]?|${PH})([^>]*)>([\\s\\S]*?)</(\\1|${PH})>\\s*$|^\\s*<([a-z]+[1-6]?|${PH})([^>]*)/>\\s*$`)
+            // Create elements, interpolations and parts arrays.
+            const elements = [], interpolations = [];
+            const parts = splitPlaceholders(
+                parseInterpolations(
+                    parseElements(
+                        expandComponents(
+                            addPlaceholders(
+                                strings,
+                                expressions
+                            ).trim(),
+                            expressions
+                        ),
+                        expressions,
+                        elements
+                    ),
+                    expressions,
+                    interpolations
+                ),
+                expressions
             );
-
-            if (match) {
-                // It's a component with tag.
-                const { tag : tagExpression, attributes : attributesAndEvents, inner, close } = parseMatch(match, expressions);
-                // Get tag, attributes.
-                tag = function() {
-                    return Component.sanitize(getExpressionResult(tagExpression, this));
-                };
-                // Get attributes.
-                attributes = function() {
-                    return expandAttributes(attributesAndEvents, value => getExpressionResult(value, this)).attributes;
-                };
-                // Get events.
-                events = function() {
-                    const onlyEvents = expandAttributes(attributesAndEvents, value => getExpressionResult(value, this)).events;
-
-                    return Object.keys(onlyEvents).reduce((out, key) => {
-                        const typeListeners = getExpressionResult(onlyEvents[key], this);
-
-                        Object.keys(typeListeners).forEach(selector => {
-                            out[`${key}${selector === '&' ? '' : ` ${selector}`}`] = typeListeners[selector];
-                        });
-
-                        return out;
-                    }, {});
-                };
-                // If there is a closing tag, get template.
-                if (close) {
-                    const list = inner ? splitPlaceholders(inner, expressions) : [];
-                    template = function(addChild) {
-                        return deepFlat(list.map(item => getExpressionResult(item, this))).map(item => {
-                            if (typeof item !== 'undefined' && item !== null && item !== false &&  item !== true) {
-                                if (item instanceof SafeHTML) return item;
-                                if (item instanceof Component) return addChild(item);
-                                return Component.sanitize(item);
-                            }
-                            return '';
-                        }).join('');
-                    };
-                }
-            } else {
-                // It's a container.
-                match = main.match(new RegExp(`^\\s*${PH}\\s*$`));
-
-                if (match) {
-                    // If there is only one expression and no tag, is a container.
-                    template = function(addChild) {
-                        // Replace expressions.
-                        return addChild(getExpressionResult(expressions[match[1]], this)).toString();
+            // Create subclass for this component.
+            return this.extend({
+                template() {
+                    return {
+                        elements : elements.map(element => new Element({
+                            getSelector : element.getSelector.bind(this),
+                            getAttributes : element.getAttributes.bind(this)
+                        })),
+                        interpolations : interpolations.map(interpolation => new Interpolation({
+                            getStart : interpolation.getStart.bind(this),
+                            getEnd : interpolation.getEnd.bind(this),
+                            expression : interpolation.expression,
+                            isComponent,
+                            isElement
+                        })),
+                        parts,
                     };
-                } else {
-                    throw new SyntaxError('Invalid component');
                 }
-            }
-
-            const Current = this;
-            // Create subclass for this component.
-            return Current.extend({
-                // Set root element tag.
-                tag,
-                // Set attributes.
-                attributes,
-                // Set events.
-                events,
-                // Set template.
-                template
             });
         }
     }
 
-    Component.PLACEHOLDER_EXPRESSION = (idx) => `__RASTI_{${idx}}__`;
-    Component.DATA_ATTRIBUTE_UID = 'data-rasti-uid';
-    Component.RENDER_TYPE_HYDRATE = 'hydrate';
-    Component.RENDER_TYPE_RECYCLE = 'recycle';
-    Component.RENDER_TYPE_RENDER = 'render';
+    /*
+     * Attributes used to identify elements and events.
+     */
+    Component.ATTRIBUTE_ELEMENT = 'data-rasti-el';
+    Component.ATTRIBUTE_EVENT = (type) => `data-rasti-on-${type}`;
+
+    /*
+     * Placeholders used to temporarily replace expressions in the template.
+     */
+    Component.PLACEHOLDER = (idx) => `__RASTI-${idx}__`;
+
+    /*
+     * Markers used to identify interpolation and recycled components.
+     */
+    Component.MARKER_RECYCLED = (uid) => `rasti-recycled-${uid}`;
+    Component.MARKER_START = (uid) => `rasti-start-${uid}`;
+    Component.MARKER_END = (uid) => `rasti-end-${uid}`;
+
+    /**
+     * Components are a special kind of `View` that is designed to be easily composable, 
+     * making it simple to add child views and build complex user interfaces.  
+     * Unlike views, which are render-agnostic, components have a specific set of rendering 
+     * guidelines that allow for a more declarative development style.  
+     * Components are defined with the {@link #module_component_create Component.create} static method, which takes a tagged template string or a function that returns another component.
+     * @module
+     * @extends View
+     * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onHydrate, onRecycle, onUpdate, onCreate, onChange. Any additional options not in the component or view options list will be automatically extracted as props and stored as `this.props`.
+     * @property {string} [key] A unique key to identify the component. Components with keys are recycled when the same key is found in the previous render. Unkeyed components are recycled based on type and position.
+     * @property {Rasti.Model} [model] A `Rasti.Model` or any emitter object containing data and business logic. The component will listen to `change` events and call `onChange` lifecycle method.
+     * @property {Rasti.Model} [state] A `Rasti.Model` or any emitter object containing data and business logic, to be used as internal state. The component will listen to `change` events and call `onChange` lifecycle method.
+     * @property {Rasti.Model} [props] Automatically created from any options not merged to the component instance. Contains props passed from parent component as a `Rasti.Model`. The component will listen to `change` events on props and call `onChange` lifecycle method. When a component with a `key` is recycled during parent re-render, new props are automatically updated and any changes trigger a re-render.
+     * @see {@link #module_component_create Component.create}
+     * @example
+     * import { Component, Model } from 'rasti';
+     * // 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);
+     */
+    var Component$1 = Component.create`<div></div>`;
 
-    exports.Component = Component;
+    exports.Component = Component$1;
     exports.Emitter = Emitter;
     exports.Model = Model;
     exports.View = View;