rasti 3.0.0-alpha.0 → 3.0.0-alpha.1

package/README.md

@@ -19,13 +19,20 @@
 
 ## Key Features  
 
-- 🌟 **Declarative Components**: Build dynamic UI components using intuitive template literals.  
-- 🎯 **Event Delegation**: Simplify event handling with built-in delegation.  
-- 🔗 **Model-View Binding**: Keep your UI and data in sync with ease.  
-- 🌐 **Server-Side Rendering**: Render as plain text for server-side use or static builds.  
-- ⚡ **Lightweight and Fast**: Minimal overhead with efficient rendering.  
-- 🕰️ **Legacy Compatibility**: Seamlessly integrates into existing **Backbone.js** projects.
-- 📐 **Standards-Based**: Built on modern web standards, no tooling required. 
+- **Declarative Components** 🌟  
+    Build dynamic UI components using intuitive template literals.  
+- **Event Delegation** 🎯  
+    Simplify event handling with built-in delegation.  
+- **Model-View Binding** 🔗  
+    Keep your UI and data in sync with ease.  
+- **Server-Side Rendering** 🌐  
+    Render as plain text for server-side use or static builds.  
+- **Lightweight and Fast** ⚡  
+    Minimal overhead with efficient rendering.  
+- **Legacy Compatibility** 🕰️  
+    Seamlessly integrates into existing **Backbone.js** projects.  
+- **Standards-Based** 📐  
+    Built on modern web standards, no tooling required.  
 
 ## Getting Started
 
@@ -58,19 +65,20 @@ const { Model, Component } = Rasti;
 ### Create a `Component`
 
 ```javascript
-// Create Timer component.
-// Renders seconds from model.
+// Define a Timer component that displays the number of seconds from the model.
 const Timer = Component.create`
     <div>
         Seconds: <span>${({ model }) => model.seconds}</span>
     </div>
 `;
-// Create model to store seconds.
+
+// Create a model to store the seconds.
 const model = new Model({ seconds: 0 });
-// Mount timer on body.
-// Pass model as options.
+
+// Mount the Timer component to the body and pass the model as an option.
 Timer.mount({ model }, document.body);
-// Increment `model.seconds` every second.
+
+// Increment the `seconds` property of the model every second.
 setInterval(() => model.seconds++, 1000);
 ```
 
@@ -79,56 +87,21 @@ setInterval(() => model.seconds++, 1000);
 ### Adding sub components
 
 ```javascript
-// Create Button component.
-// Calls `options.handleClick` when clicked.
-// Renders children passed to it.
-const Button = Component.create`
-    <button
-        onClick=${{ '&' : function() { this.options.handleClick() } }}
-    >
-        ${({ options }) => options.renderChildren()}
-    </button>
-`;
-// Create Counter component.
-// Adds two Buttons to increment and decrement count.
-// Displays current count.
-const Counter = Component.create`
-    <div>
-        <div>Counter: ${() => model.count}</div>
-        <${Button} handleClick=${({ model }) => () => model.count++}>
-            Increment
-        </${Button}>
-        <${Button} handleClick=${({ model }) => () => model.count--}>
-            Decrement
-        </${Button}>
-    </div>
-`;
-// Create model to store count.
-const model = new Model({ count: 0 });
-// Mount counter on body.
-// Pass model as options.
-Counter.mount({ model }, document.body);
-```
-
-[Try it on CodePen](https://codepen.io/8tentaculos/pen/ZEZarEQ?editors=0010)
-
-### Rendering iterables
-
-```javascript
-// Routes data to be used in Navigation.
+// Define the routes for the navigation menu.
 const routes = [
-    { label : 'Home', href : '#' },
-    { label : 'Faq', href : '#faq' },
-    { label : 'Contact', href : '#contact' },
+    { label: 'Home', href: '#' },
+    { label: 'Faq', href: '#faq' },
+    { label: 'Contact', href: '#contact' },
 ];
-// Create Link component to be used in Navigation.
+
+// Create a Link component for navigation items.
 const Link = Component.create`
     <a href="${({ options }) => options.href}">
         ${({ options }) => options.label}
     </a>
 `;
-// Create Navigation component.
-// Iterates over routes and mounts Link components.
+
+// Create a Navigation component that renders Link components for each route.
 const Navigation = Component.create`
     <nav>
         ${({ options }) => options.routes.map(
@@ -136,8 +109,8 @@ const Navigation = Component.create`
         )}
     </nav>
 `;
-// Create Page component.
-// Adds Navigation and displays current route label as title.
+
+// Create a Page component that includes the Navigation and displays the current route's label as the title.
 const Page = Component.create`
     <main>
         <${Navigation} routes=${({ options }) => options.routes} />
@@ -150,12 +123,14 @@ const Page = Component.create`
         </section>
     </main>
 `;
-// Local state to store location.
-const model = new Model({ location : document.location.hash });
-// Listen to location changes and update state.
+
+// Initialize a model to store the current location.
+const model = new Model({ location: document.location.hash });
+
+// Update the model's location state when the browser's history changes.
 window.addEventListener('popstate', () => model.location = document.location.hash);
-// Mount counter on body.
-// Pass routes and model as options.
+
+// Mount the Page component to the body, passing the routes and model as options.
 Page.mount({ routes, model }, document.body);
 ```
 

package/dist/rasti.js

@@ -47,7 +47,8 @@
          * @param {string} type Type of the event (e.g. `change`).
          * @param {function} listener Callback function to be called when the event is emitted.
          * @example
-         * this.model.on('change', this.render.bind(this)); // Re render when model changes.
+         * // Re render when model changes.
+         * this.model.on('change', this.render.bind(this));
          */
         on(type, listener) {
             // Validate listener.
@@ -68,6 +69,7 @@
          * @param {string} type Type of the event (e.g. `change`).
          * @param {function} listener Callback function to be called when the event is emitted.
          * @example
+         * // Log a message once when model changes.
          * this.model.once('change', () => console.log('This will happen once'));
          */
         once(type, listener) {
@@ -90,7 +92,8 @@
          * @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.
          * @example
-         * this.model.off('change'); // Stop listening to changes.
+         * // Stop listening to changes.
+         * this.model.off('change');
          */
         off(type, listener) {
             // No listeners.
@@ -119,7 +122,8 @@
          * @param {string} type Type of the event (e.g. `change`).
          * @param {any} [...args] Arguments to be passed to listener.
          * @example
-         * this.emit('invalid'); // Emit validation error event.
+         * // Emit validation error event.
+         * this.emit('invalid');
          */
         emit(type, ...args) {
             // No listeners.
@@ -155,13 +159,13 @@
      * 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 `attrs` parameter. For every attribute, a getter is generated to retrieve the model property 
+     * 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.
      * @module
      * @extends Rasti.Emitter
-     * @param {object} attrs Object containing model attributes to extend `this.attributes`. Getters and setters are generated for `this.attributtes`, in order to emit `change` events.
-     * @property {object} 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.
+     * @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.
      * @property {object} previous Object containing previous attributes when a change occurs.
      * @example
      * import { Model } from 'rasti';
@@ -194,14 +198,14 @@
      * product.setDiscount(10); // Output: "New Price: 900"
      */
     class Model extends Emitter {
-        constructor(attrs = {}) {
+        constructor(attributes = {}) {
             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, attrs);
+            this.attributes = Object.assign({}, defaults, attributes);
             // Object to store previous attributes when a change occurs.
             this.previous = {};
             // Generate getters/setters for every attribute.
@@ -210,7 +214,7 @@
 
         /**
          * 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} attrs Object containing model attributes to extend `this.attributes`.
+         * @param {object} attributes Object containing model attributes to extend `this.attributes`.
          */
         preinitialize() {}
 
@@ -330,7 +334,7 @@
     };
 
     /**
-     * - Listens for changes and renders UI.
+     * - Listens for changes and renders the UI.
      * - Handles user input and interactivity.
      * - Sends captured input to the model.
      *
@@ -340,16 +344,16 @@
      * emitted by the models to re-render themselves based on changes.  
      * Each `View` has a root element, `this.el`, which is used for event delegation.  
      * All element lookups are scoped to this element, and any rendering or DOM manipulations should be done inside it. 
-     * If `this.el` is not present, an element will be created using `this.tag` (defaulting to div) and `this.attributes`.
+     * If `this.el` is not present, an element will be created using `this.tag` (defaulting to `div`) and `this.attributes`.
      * @module
-     * @extends Rasti.Emitter
-     * @param {object} options Object containing options. The following keys will be merged to `this`: el, tag, attributes, events, model, template, onDestroy.
-     * @property {node} el Every view has a root element, `this.el`. If not present it will be created. If a function is passed, it will be called to get the element. It will be bound to the view instance.
-     * @property {string} tag If `this.el` is not present, an element will be created using `this.tag`. Default is `div`. If a function is passed, it will be called to get the tag name. It will be bound to the view instance.
-     * @property {object} attributes If `this.el` is not present, an element will be created using `this.attributes`. If a function is passed, it will be called to get the attributes. It will be bound to the view instance.
-     * @property {object} events Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element. If a function is passed, it will be called to get the events. It will be bound to the view instance.
-     * @property {object} model A `Rasti.Model` or any object containing data and business logic.
-     * @property {function} template A function that receives data and returns a markup string (e.g., HTML).
+     * @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 {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}. 
      * @example
      * import { View } from 'rasti';
      * 
@@ -522,24 +526,39 @@
         }
 
         /**
-         * Provide declarative listeners for DOM events within a view. If an events hash is not passed directly, 
-         * uses `this.events` as the source.  
-         * Events are written in the format `{'event selector' : 'listener'}`. 
-         * The listener may be either the name of a method on the view, or a direct function body.
-         * Omitting the selector causes the event to be bound to the view's root element (`this.el`).  
-         * By default, `delegateEvents` is called within the View's constructor, 
-         * so if you have a simple events hash, all of your DOM events will always already be connected, 
-         * and you will never have to call this function yourself.   
-         * All attached listeners are bound to the view automatically, so when the listeners are invoked, 
-         * `this` continues to refer to the view object.  
-         * When `delegateEvents` is run again, perhaps with a different events hash, all listeners 
-         * are removed and delegated afresh.
-         * @param {object} [events] Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element.
-         * @return {Rasti.View} Return `this` for chaining.
+         * Provide declarative listeners for DOM events within a view. If an events object is not provided, 
+         * it defaults to using `this.events`. If `this.events` is a function, it will be called to get the events object.
+         * 
+         * The events object should follow the format `{'event selector': 'listener'}`:
+         * - `event`: The type of event (e.g., 'click').
+         * - `selector`: A CSS selector to match the event target. If omitted, the event is bound to the root element.
+         * - `listener`: A function or a string representing a method name on the view. The method will be called with `this` bound to the view instance.
+         * 
+         * By default, `delegateEvents` is called within the View's constructor. If you have a simple events object, 
+         * all of your DOM events will be connected automatically, and you will not need to call this function manually.
+         * 
+         * 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.
+         * 
+         * @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
-         * MyView.prototype.events = {
-         *      'click button.ok' : 'onClickOkButton',
-         *      'click button.cancel' : function() {}
+         * // Using a function.
+         * class Modal extends View {
+         *     events() {
+         *         return {
+         *             'click button.ok': 'onClickOkButton',
+         *             'click button.cancel': function() {}
+         *         };
+         *     }
+         * }
+         * 
+         * // Using an object.
+         * Modal.prototype.events = {
+         *     'click button.ok' : 'onClickOkButton',
+         *     'click button.cancel' : function() {}
          * };
          */
         delegateEvents(events) {
@@ -589,7 +608,7 @@
         /**
          * Removes all of the view's delegated events. 
          * Useful if you want to disable or remove a view from the DOM temporarily. 
-         * Called automatically when the view is destroyed.
+         * Called automatically when the view is destroyed and when `delegateEvents` is called again.
          * @return {Rasti.View} Return `this` for chaining.
          */
         undelegateEvents() {
@@ -605,16 +624,16 @@
         /**
          * Renders the view.
          * This method should be overridden with custom logic.
-         * The convention is to only manipulate the DOM within the scope of `this.el`,
+         * The only convention is to manipulate the DOM within the scope of `this.el`,
          * and to return `this` for chaining.
-         * If you add any child views, you must call `this.destroyChildren`.
+         * If you add any child views, you should call `this.destroyChildren` before re-rendering.
          * The default implementation sets the innerHTML of `this.el` with the result
          * of calling `this.template`, passing `this.model` as an argument.
          * <br><br> &#9888; **Security Notice:** The default implementation utilizes `innerHTML` on the root element
-         * for rendering, which may introduce Cross - Site Scripting (XSS) risks. Ensure that any user-generated 
+         * for rendering, which may introduce Cross-Site Scripting (XSS) risks. Ensure that any user-generated 
          * content is properly sanitized before inserting it into the DOM. For best practices on secure data handling, 
          * refer to the [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html).<br><br>
-         * @return {Rasti.View} Return `this` for chaining.
+         * @return {Rasti.View} Returns `this` for chaining.
          */
         render() {
             if (this.template) this.el.innerHTML = this.template(this.model);
@@ -628,6 +647,17 @@
      */
     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;
+    }, []);
+
     /*
      * Same as getResult, but pass context as argument to the expression.
      * Used to evaluate expressions in the context of a component.
@@ -752,7 +782,7 @@
                     const list = splitPlaceholders(expandComponents(inner, expressions), expressions);
                     // Create renderChildren function.
                     renderChildren = function() {
-                        return list.map(item => renderExpression(item, this)).flat();
+                        return deepFlat(list.map(item => renderExpression(item, this)));
                     };
                 }
                 // Create mount function.
@@ -821,6 +851,14 @@
         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
+    };
+
     /*
      * These option keys will be extended on the component instance.
      */
@@ -832,26 +870,19 @@
         onRender : true
     };
 
-    /*
-     * 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
-    };
-
     /**
      * 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 `create` static method, which takes a tagged template.
+     * 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.
@@ -1091,13 +1122,13 @@
          * });
          */
         partial(strings, ...expressions) {
-            return splitPlaceholders(
+            return deepFlat(splitPlaceholders(
                 expandComponents(
                     addPlaceholders(strings, expressions), expressions
                 ), expressions
             ).map(item => {
                 return renderExpression(item, this);
-            }).flat();
+            }));
         }
 
         getRecyclePlaceholder() {
@@ -1283,38 +1314,96 @@
         }
 
         /**
-         * Takes a tagged template containing an HTML string, 
-         * and returns a new `Component` class.
+         * Takes a tagged template string or a function that returns another component, and returns a new `Component` class.
          * - The template outer tag and attributes will be used to create the view's root element.
-         * - Boolean attributes should be passed in the form of `attribute="${() => true}"`.
-         * - Event handlers should be passed, at the root element, in the form of `onEventName=${{'selector' : listener }}`. Where `selector` is a CSS selector. The event will be delegated to the view's root element.
          * - The template inner HTML will be used as the view's template.
-         * - 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.
-         * - If the function returns a component instance, it will be added as a child component.
-         * - If the function returns an array, each item will be evaluated as above.
+         *     ```javascript
+         *     const Button = Component.create`<button class="button">Click me</button>`;
+         *     ```
+         * - 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>
+         *     `;
+         *     ```
+         * - 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}. 
+         * - Boolean attributes should be passed in the form of `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} />
+         *     `;
+         *     ```
+         * - If the interpolated function returns a component instance, it will be added as a child component.
+         * - If the interpolated function returns an array, each item will be evaluated as above.
+         *     ```javascript
+         *     // Create a button component.
+         *     const Button = Component.create`
+         *         <button class="button">
+         *             ${({ options }) => options.renderChildren()}
+         *        </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 })
+         *             )}
+         *        </nav>
+         *     `;
+         *     // Create a header component. Add navigation as a child.
+         *     const Header = Component.create`
+         *         <header>
+         *             ${({ options }) => Navigation.mount({ items : options.items})}
+         *         </header>
+         *     `;
+         *     ```
+         * - Child components can be added using a component tag.
+         *    ```javascript
+         *     // Create a button component.
+         *     const Button = Component.create`
+         *         <button class="button">
+         *             ${({ options }) => options.renderChildren()}
+         *         </button>
+         *     `;
+         *     // Create a navigation component. Add buttons as children. Iterate over items.
+         *     const Navigation = Component.create`
+         *         <nav>
+         *             ${(self) => self.options.items.map(
+         *                 item => self.partial`<${Button}>${item.label}</${Button}>`
+         *             )}
+         *         </nav>
+         *     `;
+         *     // Create a header component. Add navigation as a child.
+         *     const Header = Component.create`
+         *         <header>
+         *             <${Navigation} items="${({ options }) => options.items}" />
+         *         </header>
+         *     `;
+         *     ```
          * - If the tagged template contains only one expression that mounts a component, or the tags are references to a component, the component will be considered a <b>container</b>. It will render a single component as a child. `this.el` will be a reference to that child component's element.
+         *     ```javascript
+         *     // Create a button component.
+         *     const Button = Component.create`
+         *         <button class="${({ options }) => options.className}">
+         *             ${self => self.renderChildren()}
+         *         </button>
+         *     `;
+         *     // Create a container using the button component
+         *     const ButtonOk = Component.create`
+         *         <${Button} className="ok">Ok</${Button}>
+         *     `;
+         *     // Create a button component using a function
+         *     const ButtonCancel = Component.create(() => Button.mount({
+         *         className: 'cancel',
+         *         renderChildren: () => 'Cancel'
+         *     }));
+         *     ```
          * @static
          * @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.
-         * @example
-         * import { Component } from 'rasti';
-         * // Create a button component.
-         * const Button = Component.create`
-         *     <button class="${({ options }) => options.className}">
-         *         ${self => self.renderChildren()}
-         *     </button>
-         * `;
-         * // Create a container using the button component
-         * const ButtonOk = Component.create`
-         *     <${Button} className="ok">Ok</${Button}>
-         * `;
-         * // Create a button component using a function
-         * const ButtonCancel = Component.create(() => Button.mount({
-         *     className: 'cancel',
-         *     renderChildren: () => 'Cancel'
-         * }));
          */
         static create(strings, ...expressions) {
             const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
@@ -1361,7 +1450,7 @@
                 if (close) {
                     const list = inner ? splitPlaceholders(inner, expressions) : [];
                     template = function(addChild) {
-                        return list.map(item => renderExpression(item, this)).flat().map(item => {
+                        return deepFlat(list.map(item => renderExpression(item, this))).map(item => {
                             if (typeof item !== 'undefined' && item !== null && item !== false &&  item !== true) {
                                 return item instanceof Component ? addChild(item) : item;
                             }

package/dist/rasti.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Rasti={})}(this,(function(t){"use strict";class e{on(t,e){if("function"!=typeof e)throw new TypeError("Listener must be a function");return this.listeners||(this.listeners={}),this.listeners[t]||(this.listeners[t]=[]),this.listeners[t].push(e),()=>this.off(t,e)}once(t,e){if("function"==typeof e){const s=this,i=e;e=function(...n){i(...n),s.off(t,e)}}return this.on(t,e)}off(t,e){this.listeners&&(t?this.listeners[t]&&(e?(this.listeners[t]=this.listeners[t].filter((t=>t!==e)),this.listeners[t].length||delete this.listeners[t]):delete this.listeners[t],Object.keys(this.listeners).length||delete this.listeners):delete this.listeners)}emit(t,...e){this.listeners&&this.listeners[t]&&this.listeners[t].slice().forEach((function(t){t(...e)}))}}var s=(t,e,...s)=>"function"!=typeof t?t:t.apply(e,s);const i={el:!0,tag:!0,attributes:!0,events:!0,model:!0,template:!0,onDestroy:!0};class n extends e{constructor(t={}){super(),this.preinitialize.apply(this,arguments),this.uid="uid"+ ++n.uid,this.delegatedEventListeners=[],this.children=[],this.destroyQueue=[],Object.keys(t).forEach((e=>{i[e]&&(this[e]=t[e])})),this.ensureElement()}preinitialize(){}$(t){return this.el.querySelector(t)}$$(t){return this.el.querySelectorAll(t)}destroy(){return this.destroyChildren(),this.undelegateEvents(),this.off(),this.destroyQueue.forEach((t=>t())),this.destroyQueue=[],this.onDestroy.apply(this,arguments),this}onDestroy(){}addChild(t){return this.children.push(t),t}destroyChildren(){this.children.forEach((t=>t.destroy())),this.children=[]}ensureElement(){if(this.el)this.el=s(this.el,this);else{const t=s(this.tag,this),e=s(this.attributes,this);this.el=this.createElement(t,e)}this.delegateEvents()}createElement(t="div",e={}){let s=document.createElement(t);return Object.keys(e).forEach((t=>s.setAttribute(t,e[t]))),s}removeElement(){return this.el.parentNode.removeChild(this.el),this}delegateEvents(t){if(t||(t=s(this.events,this)),!t)return this;this.delegatedEventListeners.length&&this.undelegateEvents();let e={};return Object.keys(t).forEach((s=>{const i=s.split(" "),n=i.shift(),r=i.join(" ");let h=t[s];h=("string"==typeof h?this[h]:h).bind(this),e[n]||(e[n]=[]),e[n].push({selector:r,listener:h})})),Object.keys(e).forEach((t=>{const s=s=>{e[t].forEach((({selector:t,listener:e})=>{t&&!s.target.closest(t)||e(s,this)}))};this.delegatedEventListeners.push({type:t,listener:s}),this.el.addEventListener(t,s)})),this}undelegateEvents(){return this.delegatedEventListeners.forEach((({type:t,listener:e})=>{this.el.removeEventListener(t,e)})),this.delegatedEventListeners=[],this}render(){return this.template&&(this.el.innerHTML=this.template(this.model)),this}}n.uid=0;const r=(t,e)=>s(t,e,e),h=(t,e)=>t.reduce(((t,s,i)=>(t.push(s),void 0!==e[i]&&t.push(E.PLACEHOLDER_EXPRESSION(i)),t)),[]).join(""),l=(t,e)=>{const s=E.PLACEHOLDER_EXPRESSION("(\\d+)"),i=new RegExp(`${s}`,"g"),n=[];let r,h=0;for(;null!==(r=i.exec(t));){const s=t.slice(h,r.index);n.push(s,e[r[1]]),h=r.index+r[0].length}return n.push(t.slice(h)),n},o=(t,e)=>{const s=t.reduce(((t,s)=>{const i=e(s[0]);if(1===s.length)"object"==typeof i?t.all=Object.assign(t.all,i):"string"==typeof i&&(t.all[i]=!0);else{const n=e(s[1]);t.all[i]=n}return t}),{all:{},events:{},attributes:{}});return Object.keys(s.all).forEach((t=>{const e=t.match(/on(([A-Z]{1}[a-z]+)+)/);e&&e[1]?s.events[e[1].toLowerCase()]=s.all[t]:s.attributes[t]=s.all[t]})),s},c=(t,e)=>{const s=E.PLACEHOLDER_EXPRESSION("(\\d+)");return t.replace(new RegExp(`<(${s})([^>]*)>([\\s\\S]*?)</(${s})>|<(${s})([^>]*)/>`,"g"),(function(){const{tag:t,attributes:s,inner:i,close:n,raw:h}=a(arguments,e);if(!(t.prototype instanceof E))return h;let d;if(n){if(t!==n)return h;const s=l(c(i,e),e);d=function(){return s.map((t=>r(t,this))).flat()}}return e.push((function(){const e=o(s,(t=>r(t,this))).all;return d&&(e.renderChildren=d.bind(this)),t.mount(e)})),E.PLACEHOLDER_EXPRESSION(e.length-1)}))},a=(t,e)=>{const s=E.PLACEHOLDER_EXPRESSION("(\\d+)"),[i,n,r,h,l,o,c,a,d,u]=t,f={raw:i,attributes:[]};let p;n?(f.tag=void 0!==r?e[r]:n,f.inner=l,f.close=void 0!==c?e[c]:o,p=h):(f.tag=void 0!==d?e[d]:a,p=u);const y=new RegExp(`(${s}|[\\w-]+)(?:=(["']?)(?:${s}|((?:.?(?!["']?\\s+(?:\\S+)=|\\s*/?[>"']))+.))\\3)?`,"g");let g;for(;null!==(g=y.exec(p));){const[,t,s,,i,n]=g,r=void 0!==s?e[s]:t,h=void 0!==i?e[i]:n;void 0!==h?f.attributes.push([r,h]):f.attributes.push([r])}return f},d={key:!0,state:!0,onCreate:!0,onChange:!0,onRender:!0},u={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,link:!0,meta:!0,source:!0,track:!0,wbr:!0};class E extends n{constructor(t={}){super(...arguments),Object.keys(t).forEach((e=>{d[e]&&(this[e]=t[e])})),this.options=t,this.onCreate.apply(this,arguments)}subscribe(t){if(!t.on)return;const e=this.onChange.bind(this),s=t.on("change",e);return this.destroyQueue.push("function"==typeof s?s:()=>t.off("change",e)),this}isContainer(){return!(this.tag||!this.template)}ensureElement(){this.el&&(this.el=s(this.el,this),this.delegateEvents())}findElement(t){return(t||document).querySelector(`[${E.DATA_ATTRIBUTE_UID}="${this.uid}"]`)}getAttributes(){const t={},e={},i=[],n={[E.DATA_ATTRIBUTE_UID]:this.uid};return this.attributes&&Object.assign(n,s(this.attributes,this)),Object.keys(n).forEach((s=>{let r=n[s];!1===r?e[s]=!0:!0===r?(t[s]="",i.push(s)):(null==r&&(r=""),t[s]=r,i.push(`${s}="${r}"`))})),{add:t,remove:e,html:i.join(" ")}}hydrate(t){return this.model&&this.subscribe(this.model),this.state&&this.subscribe(this.state),this.isContainer()?(this.children[0].hydrate(t),this.el=this.children[0].el):(this.el=this.findElement(t),this.delegateEvents(),this.children.forEach((t=>t.hydrate(this.el)))),this.onRender.call(this,E.RENDER_TYPE_HYDRATE),this}recycle(t){if(this.isContainer())return this.children[0].recycle(t);return this.findElement(t).replaceWith(this.el),this.onRender.call(this,E.RENDER_TYPE_RECYCLE),this}destroy(){return super.destroy.apply(this,arguments),this.destroyed=!0,this}onCreate(){}onChange(){this.render()}onRender(){}onDestroy(){}partial(t,...e){return l(c(h(t,e),e),e).map((t=>r(t,this))).flat()}getRecyclePlaceholder(){if(this.isContainer())return this.children[0].getRecyclePlaceholder();const t=s(this.tag,this)||"div",e=`${E.DATA_ATTRIBUTE_UID}="${this.uid}"`;return this.template||!u[t]?`<${t} ${e}></${t}>`:`<${t} ${e} />`}toString(){if(this.destroyChildren(),this.isContainer())return this.template.call(this,this.addChild.bind(this));const t=s(this.tag,this)||"div",e=this.getAttributes().html,i=this.template?this.template.call(this,this.addChild.bind(this)):"";return this.template||!u[t]?`<${t} ${e}>${i}</${t}>`:`<${t} ${e} />`}render(){if(this.destroyed)return this;if(!this.isContainer()){if(!this.el){const t=this.createElement("template");return t.innerHTML=this,this.hydrate(t.content),this}const t=this.getAttributes();Object.keys(t.remove).forEach((t=>{this.el.removeAttribute(t)})),Object.keys(t.add).forEach((e=>{this.el.setAttribute(e,t.add[e])}))}if(this.template){const t=document.activeElement,e=[],s=[],i=this.children;this.children=[];const n=this.template.call(this,(t=>{let n=t;const r=t.key&&i.find((e=>e.key===t.key));return r?(n=r.getRecyclePlaceholder(),s.push(r),t.destroy()):e.push(t),n}));if(this.isContainer())if(e[0]){const t=this.createElement("template");t.innerHTML=n,this.addChild(e[0]).hydrate(t.content);const s=t.content.children[0];this.el&&this.el.replaceWith(s),this.el=s}else{if(!s[0])throw new Error("Container component must have a child component");this.addChild(s[0])}else this.el.innerHTML=n,e.forEach((t=>{this.addChild(t).hydrate(this.el)})),s.forEach((t=>{this.addChild(t).recycle(this.el)}));i.forEach((t=>{s.indexOf(t)>-1||t.destroy()})),this.el.contains(t)&&t.focus()}return this.onRender.call(this,E.RENDER_TYPE_RENDER),this}static extend(t){const e=this;class s extends e{}return Object.assign(s.prototype,"function"==typeof t?t(e.prototype):t),s}static mount(t,e,s){const i=new this(t);return e&&(s?(i.toString(),i.hydrate(e)):e.appendChild(i.render().el)),i}static create(t,...e){const s=E.PLACEHOLDER_EXPRESSION("(\\d+)");let i,n,d,u;"function"==typeof t&&(e=[t],t=["",""]);const f=c(h(t,e),e);let p=f.match(new RegExp(`^\\s*<([a-z]+[1-6]?|${s})([^>]*)>([\\s\\S]*?)</(\\1|${s})>\\s*$|^\\s*<([a-z]+[1-6]?|${s})([^>]*)/>\\s*$`));if(p){const{tag:t,attributes:s,inner:h,close:c}=a(p,e);if(i=function(){return r(t,this)},n=function(){return o(s,(t=>r(t,this))).attributes},d=function(){const t=o(s,(t=>r(t,this))).events;return Object.keys(t).reduce(((e,s)=>{const i=r(t[s],this);return Object.keys(i).forEach((t=>{e[`${s}${"&"===t?"":` ${t}`}`]=i[t]})),e}),{})},c){const t=h?l(h,e):[];u=function(e){return t.map((t=>r(t,this))).flat().map((t=>null!=t&&!1!==t&&!0!==t?t instanceof E?e(t):t:"")).join("")}}}else{if(p=f.match(new RegExp(`^\\s*${s}\\s*$`)),!p)throw new SyntaxError("Invalid component");u=function(t){return t(r(e[p[1]],this)).toString()}}return this.extend({tag:i,attributes:n,events:d,template:u})}}E.PLACEHOLDER_EXPRESSION=t=>`__RASTI_{${t}}__`,E.DATA_ATTRIBUTE_UID="data-rasti-uid",E.RENDER_TYPE_HYDRATE="hydrate",E.RENDER_TYPE_RECYCLE="recycle",E.RENDER_TYPE_RENDER="render",t.Component=E,t.Emitter=e,t.Model=class extends e{constructor(t={}){super(),this.preinitialize.apply(this,arguments);const e=s(this.defaults,this)||{};this.attributes=Object.assign({},e,t),this.previous={},Object.keys(this.attributes).forEach(this.defineAttribute.bind(this))}preinitialize(){}defineAttribute(t){Object.defineProperty(this,t,{get:()=>this.get(t),set:e=>{this.set(t,e)}})}get(t){return this.attributes[t]}set(t,e,...s){let i,n;"object"==typeof t?(i=t,n=[e,...s]):(i={[t]:e},n=s);const r=this._changing;this._changing=!0;const h={};r||(this.previous=Object.assign({},this.attributes)),Object.keys(i).forEach((t=>{i[t]!==this.attributes[t]&&(h[t]=i[t],this.attributes[t]=i[t])}));const l=Object.keys(h);if(l.length&&(this._pending=["change",this,h,...n]),l.forEach((t=>{this.emit(`change:${t}`,this,i[t],...n)})),r)return this;for(;this._pending;){const t=this._pending;this._pending=null,this.emit.apply(this,t)}return this._pending=null,this._changing=!1,this}toJSON(){return Object.assign({},this.attributes)}},t.View=n}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Rasti={})}(this,(function(t){"use strict";class e{on(t,e){if("function"!=typeof e)throw new TypeError("Listener must be a function");return this.listeners||(this.listeners={}),this.listeners[t]||(this.listeners[t]=[]),this.listeners[t].push(e),()=>this.off(t,e)}once(t,e){if("function"==typeof e){const s=this,i=e;e=function(...n){i(...n),s.off(t,e)}}return this.on(t,e)}off(t,e){this.listeners&&(t?this.listeners[t]&&(e?(this.listeners[t]=this.listeners[t].filter((t=>t!==e)),this.listeners[t].length||delete this.listeners[t]):delete this.listeners[t],Object.keys(this.listeners).length||delete this.listeners):delete this.listeners)}emit(t,...e){this.listeners&&this.listeners[t]&&this.listeners[t].slice().forEach((function(t){t(...e)}))}}var s=(t,e,...s)=>"function"!=typeof t?t:t.apply(e,s);const i={el:!0,tag:!0,attributes:!0,events:!0,model:!0,template:!0,onDestroy:!0};class n extends e{constructor(t={}){super(),this.preinitialize.apply(this,arguments),this.uid="uid"+ ++n.uid,this.delegatedEventListeners=[],this.children=[],this.destroyQueue=[],Object.keys(t).forEach((e=>{i[e]&&(this[e]=t[e])})),this.ensureElement()}preinitialize(){}$(t){return this.el.querySelector(t)}$$(t){return this.el.querySelectorAll(t)}destroy(){return this.destroyChildren(),this.undelegateEvents(),this.off(),this.destroyQueue.forEach((t=>t())),this.destroyQueue=[],this.onDestroy.apply(this,arguments),this}onDestroy(){}addChild(t){return this.children.push(t),t}destroyChildren(){this.children.forEach((t=>t.destroy())),this.children=[]}ensureElement(){if(this.el)this.el=s(this.el,this);else{const t=s(this.tag,this),e=s(this.attributes,this);this.el=this.createElement(t,e)}this.delegateEvents()}createElement(t="div",e={}){let s=document.createElement(t);return Object.keys(e).forEach((t=>s.setAttribute(t,e[t]))),s}removeElement(){return this.el.parentNode.removeChild(this.el),this}delegateEvents(t){if(t||(t=s(this.events,this)),!t)return this;this.delegatedEventListeners.length&&this.undelegateEvents();let e={};return Object.keys(t).forEach((s=>{const i=s.split(" "),n=i.shift(),r=i.join(" ");let h=t[s];h=("string"==typeof h?this[h]:h).bind(this),e[n]||(e[n]=[]),e[n].push({selector:r,listener:h})})),Object.keys(e).forEach((t=>{const s=s=>{e[t].forEach((({selector:t,listener:e})=>{t&&!s.target.closest(t)||e(s,this)}))};this.delegatedEventListeners.push({type:t,listener:s}),this.el.addEventListener(t,s)})),this}undelegateEvents(){return this.delegatedEventListeners.forEach((({type:t,listener:e})=>{this.el.removeEventListener(t,e)})),this.delegatedEventListeners=[],this}render(){return this.template&&(this.el.innerHTML=this.template(this.model)),this}}n.uid=0;const r=t=>t.reduce(((t,e)=>(Array.isArray(e)?t.push(...r(e)):t.push(e),t)),[]),h=(t,e)=>s(t,e,e),l=(t,e)=>t.reduce(((t,s,i)=>(t.push(s),void 0!==e[i]&&t.push(f.PLACEHOLDER_EXPRESSION(i)),t)),[]).join(""),o=(t,e)=>{const s=f.PLACEHOLDER_EXPRESSION("(\\d+)"),i=new RegExp(`${s}`,"g"),n=[];let r,h=0;for(;null!==(r=i.exec(t));){const s=t.slice(h,r.index);n.push(s,e[r[1]]),h=r.index+r[0].length}return n.push(t.slice(h)),n},c=(t,e)=>{const s=t.reduce(((t,s)=>{const i=e(s[0]);if(1===s.length)"object"==typeof i?t.all=Object.assign(t.all,i):"string"==typeof i&&(t.all[i]=!0);else{const n=e(s[1]);t.all[i]=n}return t}),{all:{},events:{},attributes:{}});return Object.keys(s.all).forEach((t=>{const e=t.match(/on(([A-Z]{1}[a-z]+)+)/);e&&e[1]?s.events[e[1].toLowerCase()]=s.all[t]:s.attributes[t]=s.all[t]})),s},a=(t,e)=>{const s=f.PLACEHOLDER_EXPRESSION("(\\d+)");return t.replace(new RegExp(`<(${s})([^>]*)>([\\s\\S]*?)</(${s})>|<(${s})([^>]*)/>`,"g"),(function(){const{tag:t,attributes:s,inner:i,close:n,raw:l}=d(arguments,e);if(!(t.prototype instanceof f))return l;let u;if(n){if(t!==n)return l;const s=o(a(i,e),e);u=function(){return r(s.map((t=>h(t,this))))}}return e.push((function(){const e=c(s,(t=>h(t,this))).all;return u&&(e.renderChildren=u.bind(this)),t.mount(e)})),f.PLACEHOLDER_EXPRESSION(e.length-1)}))},d=(t,e)=>{const s=f.PLACEHOLDER_EXPRESSION("(\\d+)"),[i,n,r,h,l,o,c,a,d,u]=t,E={raw:i,attributes:[]};let p;n?(E.tag=void 0!==r?e[r]:n,E.inner=l,E.close=void 0!==c?e[c]:o,p=h):(E.tag=void 0!==d?e[d]:a,p=u);const y=new RegExp(`(${s}|[\\w-]+)(?:=(["']?)(?:${s}|((?:.?(?!["']?\\s+(?:\\S+)=|\\s*/?[>"']))+.))\\3)?`,"g");let g;for(;null!==(g=y.exec(p));){const[,t,s,,i,n]=g,r=void 0!==s?e[s]:t,h=void 0!==i?e[i]:n;void 0!==h?E.attributes.push([r,h]):E.attributes.push([r])}return E},u={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,link:!0,meta:!0,source:!0,track:!0,wbr:!0},E={key:!0,state:!0,onCreate:!0,onChange:!0,onRender:!0};class f extends n{constructor(t={}){super(...arguments),Object.keys(t).forEach((e=>{E[e]&&(this[e]=t[e])})),this.options=t,this.onCreate.apply(this,arguments)}subscribe(t){if(!t.on)return;const e=this.onChange.bind(this),s=t.on("change",e);return this.destroyQueue.push("function"==typeof s?s:()=>t.off("change",e)),this}isContainer(){return!(this.tag||!this.template)}ensureElement(){this.el&&(this.el=s(this.el,this),this.delegateEvents())}findElement(t){return(t||document).querySelector(`[${f.DATA_ATTRIBUTE_UID}="${this.uid}"]`)}getAttributes(){const t={},e={},i=[],n={[f.DATA_ATTRIBUTE_UID]:this.uid};return this.attributes&&Object.assign(n,s(this.attributes,this)),Object.keys(n).forEach((s=>{let r=n[s];!1===r?e[s]=!0:!0===r?(t[s]="",i.push(s)):(null==r&&(r=""),t[s]=r,i.push(`${s}="${r}"`))})),{add:t,remove:e,html:i.join(" ")}}hydrate(t){return this.model&&this.subscribe(this.model),this.state&&this.subscribe(this.state),this.isContainer()?(this.children[0].hydrate(t),this.el=this.children[0].el):(this.el=this.findElement(t),this.delegateEvents(),this.children.forEach((t=>t.hydrate(this.el)))),this.onRender.call(this,f.RENDER_TYPE_HYDRATE),this}recycle(t){if(this.isContainer())return this.children[0].recycle(t);return this.findElement(t).replaceWith(this.el),this.onRender.call(this,f.RENDER_TYPE_RECYCLE),this}destroy(){return super.destroy.apply(this,arguments),this.destroyed=!0,this}onCreate(){}onChange(){this.render()}onRender(){}onDestroy(){}partial(t,...e){return r(o(a(l(t,e),e),e).map((t=>h(t,this))))}getRecyclePlaceholder(){if(this.isContainer())return this.children[0].getRecyclePlaceholder();const t=s(this.tag,this)||"div",e=`${f.DATA_ATTRIBUTE_UID}="${this.uid}"`;return this.template||!u[t]?`<${t} ${e}></${t}>`:`<${t} ${e} />`}toString(){if(this.destroyChildren(),this.isContainer())return this.template.call(this,this.addChild.bind(this));const t=s(this.tag,this)||"div",e=this.getAttributes().html,i=this.template?this.template.call(this,this.addChild.bind(this)):"";return this.template||!u[t]?`<${t} ${e}>${i}</${t}>`:`<${t} ${e} />`}render(){if(this.destroyed)return this;if(!this.isContainer()){if(!this.el){const t=this.createElement("template");return t.innerHTML=this,this.hydrate(t.content),this}const t=this.getAttributes();Object.keys(t.remove).forEach((t=>{this.el.removeAttribute(t)})),Object.keys(t.add).forEach((e=>{this.el.setAttribute(e,t.add[e])}))}if(this.template){const t=document.activeElement,e=[],s=[],i=this.children;this.children=[];const n=this.template.call(this,(t=>{let n=t;const r=t.key&&i.find((e=>e.key===t.key));return r?(n=r.getRecyclePlaceholder(),s.push(r),t.destroy()):e.push(t),n}));if(this.isContainer())if(e[0]){const t=this.createElement("template");t.innerHTML=n,this.addChild(e[0]).hydrate(t.content);const s=t.content.children[0];this.el&&this.el.replaceWith(s),this.el=s}else{if(!s[0])throw new Error("Container component must have a child component");this.addChild(s[0])}else this.el.innerHTML=n,e.forEach((t=>{this.addChild(t).hydrate(this.el)})),s.forEach((t=>{this.addChild(t).recycle(this.el)}));i.forEach((t=>{s.indexOf(t)>-1||t.destroy()})),this.el.contains(t)&&t.focus()}return this.onRender.call(this,f.RENDER_TYPE_RENDER),this}static extend(t){const e=this;class s extends e{}return Object.assign(s.prototype,"function"==typeof t?t(e.prototype):t),s}static mount(t,e,s){const i=new this(t);return e&&(s?(i.toString(),i.hydrate(e)):e.appendChild(i.render().el)),i}static create(t,...e){const s=f.PLACEHOLDER_EXPRESSION("(\\d+)");let i,n,u,E;"function"==typeof t&&(e=[t],t=["",""]);const p=a(l(t,e),e);let y=p.match(new RegExp(`^\\s*<([a-z]+[1-6]?|${s})([^>]*)>([\\s\\S]*?)</(\\1|${s})>\\s*$|^\\s*<([a-z]+[1-6]?|${s})([^>]*)/>\\s*$`));if(y){const{tag:t,attributes:s,inner:l,close:a}=d(y,e);if(i=function(){return h(t,this)},n=function(){return c(s,(t=>h(t,this))).attributes},u=function(){const t=c(s,(t=>h(t,this))).events;return Object.keys(t).reduce(((e,s)=>{const i=h(t[s],this);return Object.keys(i).forEach((t=>{e[`${s}${"&"===t?"":` ${t}`}`]=i[t]})),e}),{})},a){const t=l?o(l,e):[];E=function(e){return r(t.map((t=>h(t,this)))).map((t=>null!=t&&!1!==t&&!0!==t?t instanceof f?e(t):t:"")).join("")}}}else{if(y=p.match(new RegExp(`^\\s*${s}\\s*$`)),!y)throw new SyntaxError("Invalid component");E=function(t){return t(h(e[y[1]],this)).toString()}}return this.extend({tag:i,attributes:n,events:u,template:E})}}f.PLACEHOLDER_EXPRESSION=t=>`__RASTI_{${t}}__`,f.DATA_ATTRIBUTE_UID="data-rasti-uid",f.RENDER_TYPE_HYDRATE="hydrate",f.RENDER_TYPE_RECYCLE="recycle",f.RENDER_TYPE_RENDER="render",t.Component=f,t.Emitter=e,t.Model=class extends e{constructor(t={}){super(),this.preinitialize.apply(this,arguments);const e=s(this.defaults,this)||{};this.attributes=Object.assign({},e,t),this.previous={},Object.keys(this.attributes).forEach(this.defineAttribute.bind(this))}preinitialize(){}defineAttribute(t){Object.defineProperty(this,t,{get:()=>this.get(t),set:e=>{this.set(t,e)}})}get(t){return this.attributes[t]}set(t,e,...s){let i,n;"object"==typeof t?(i=t,n=[e,...s]):(i={[t]:e},n=s);const r=this._changing;this._changing=!0;const h={};r||(this.previous=Object.assign({},this.attributes)),Object.keys(i).forEach((t=>{i[t]!==this.attributes[t]&&(h[t]=i[t],this.attributes[t]=i[t])}));const l=Object.keys(h);if(l.length&&(this._pending=["change",this,h,...n]),l.forEach((t=>{this.emit(`change:${t}`,this,i[t],...n)})),r)return this;for(;this._pending;){const t=this._pending;this._pending=null,this.emit.apply(this,t)}return this._pending=null,this._changing=!1,this}toJSON(){return Object.assign({},this.attributes)}},t.View=n}));