rasti 3.0.0 → 3.0.1

package/README.md

@@ -138,14 +138,14 @@ Main.mount({ routes, model }, document.body);
 
 ## Why Choose **Rasti**?  
 
-**Rasti** is built for developers who want a simple yet powerful way to create UI components without the complexity of heavy frameworks. Whether you're prototyping, building a high-performance dashboard, or modernizing a **Backbone.js** app, **Rasti** lets you:  
+**Rasti** is built for developers who want a simple yet powerful way to create UI components without the complexity of heavy frameworks. Whether you're building a high-performance dashboard, or embedding a lightweight widget, **Rasti** lets you:  
 
 - **Skip the Setup**  
   No installations, no build tools—just load it and start coding.  
 - **Lightweight and Efficient**  
   Minimal footprint with optimized performance, ensuring smooth updates.  
-- **Upgrade Legacy Code Without a Rewrite**  
-  Incrementally enhance **Backbone.js** views while keeping existing functionality.  
+- **Just the Right Abstraction**  
+  Keeps you close to the DOM with no over-engineering. Fully hackable—if you're curious about how something works, just check the source code.  
 
 ## Example
 

package/dist/rasti.js

@@ -323,15 +323,7 @@
     /*
      * These option keys will be extended on the view instance.
      */
-    const viewOptions = {
-        el : true,
-        tag : true,
-        attributes : true,
-        events : true,
-        model : true,
-        template : true,
-        onDestroy : true
-    };
+    const viewOptions = ['el', 'tag', 'attributes', 'events', 'model', 'template', 'onDestroy'];
 
     /**
      * - Listens for changes and renders the UI.
@@ -354,6 +346,7 @@
      * @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 {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';
      * 
@@ -382,7 +375,7 @@
             this.preinitialize.apply(this, arguments);
             // Generate unique id.
             // Useful to generate element ids.
-            this.uid = `uid${++View.uid}`;
+            this.uid = `rasti-${++View.uid}`;
             // Store delegated event listeners,
             // so they can be unbound later.
             this.delegatedEventListeners = [];
@@ -391,9 +384,9 @@
             this.children = [];
             // Mutable array to store handlers to be called on destroy.
             this.destroyQueue = [];
-            // Extend "this" with options, mapping viewOptions keys.
-            Object.keys(options).forEach(key => {
-                if (viewOptions[key]) this[key] = options[key];
+            // Extend "this" with options.
+            viewOptions.forEach(key => {
+                if (key in options) this[key] = options[key];
             });
             // Ensure that the view has a root element at `this.el`.
             this.ensureElement();
@@ -622,17 +615,16 @@
         }
 
         /**
-         * Renders the view.
+         * Renders the view.  
          * This method should be overridden with custom logic.
          * 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 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 
-         * content is properly sanitized before inserting it into the DOM. You can use the @link{#module_view_sanitize View.sanitize} 
-         * static method to escape HTML entities in a string.  
+         * and to return `this` for chaining.  
+         * If you add any child views, you should call `this.destroyChildren` before re-rendering.  
+         * The default implementation updates `this.el`'s innerHTML with the result
+         * of calling `this.template`, passing `this.model` as the argument.
+         * <br><br> &#9888; **Security Notice:** The default implementation utilizes `innerHTML`, which may introduce Cross-Site Scripting (XSS) risks.  
+         * Ensure that any user-generated content is properly sanitized before inserting it into the DOM. 
+         * You can use the {@link #module_view_sanitize View.sanitize} static method to escape HTML entities in a string.  
          * 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} Returns `this` for chaining.
@@ -663,8 +655,16 @@
         }
     }
 
-    /*
-     * Unique Id
+    /**
+     * Counter for generating unique IDs for view instances.  
+     * This is primarily used to assign unique identifiers to each view instance (`this.uid`), which can be helpful for tasks like 
+     * generating element IDs.  
+     * {@link #module_component Component}s use `this.uid` to generate data attributes for their elements, to be looked up on hydration.  
+     * For server-side rendering, this counter should be reset to `0` on every request to ensure that the generated 
+     * unique IDs match those on the client, enabling seamless hydration of components.  
+     * @static
+     * @type {number}
+     * @default 0
      */
     View.uid = 0;
 
@@ -679,8 +679,12 @@
         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
      */
     class SafeHTML {
         constructor(value) {
@@ -692,20 +696,22 @@
         }
     }
 
-    /*
+    /**
      * 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);
 
-    /*
+    /**
      * Generate string with placeholders for interpolated expressions.
      * @param strings {array} Array of strings.
      * @param expressions {array} Array of expressions.
      * @return {string} String with placeholders.
+     * @private
      */
     const addPlaceholders = (strings, expressions) => 
         strings.reduce((out, string, i) => {
@@ -718,11 +724,12 @@
             return out;
         }, []).join('');
 
-    /*
+    /**
      * 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.
+     * @private
      */
     const splitPlaceholders = (main, expressions) => {
         const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
@@ -742,7 +749,7 @@
         return out;
     };
 
-    /*
+    /**
      * Expand attributes.
      * @param attributes {array} Array of attributes as key, value pairs.
      * @param getExpressionResult {function} Function to render expressions.
@@ -750,6 +757,7 @@
      * @property {object} all All attributes.
      * @property {object} events Event listeners.
      * @property {object} attributes Attributes.
+     * @private
      */
     const expandAttributes = (attributes, getExpressionResult) => {
         const out = attributes.reduce((out, pair) => {
@@ -787,7 +795,7 @@
         return out;
     };
 
-    /*
+    /**
      * Replace component tags with expressions.
      * `<${Component} />` or `<${Component}></${Component}>` will be replaced 
      * by a function that mounts the component.
@@ -796,6 +804,7 @@
      * @param main {string} The main template.
      * @return {string} The template with components tags replaced by expressions
      * placeholders.
+     * @private
      */
     const expandComponents = (main, expressions) => {
         const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
@@ -835,7 +844,7 @@
         );
     };
 
-    /*
+    /**
      * Parse match data to get tag, attributes, inner html and close tag.
      * @param match {array}
      * @return {object}
@@ -844,6 +853,7 @@
      * @property {string} close The closing tag.
      * @property {array} attributes Array of attributes as key, value pairs.
      * @property {string} raw The whole match.
+     * @private
      */
     const parseMatch = (match, expressions) => {
         const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
@@ -896,13 +906,7 @@
     /*
      * These option keys will be extended on the component instance.
      */
-    const componentOptions = {
-        key : true,
-        state : true,
-        onCreate : true,
-        onChange : true,
-        onRender : true
-    };
+    const componentOptions = ['key', 'state', 'onCreate', 'onChange', 'onRender'];
 
     /**
      * Components are a special kind of `View` that is designed to be easily composable, 
@@ -935,9 +939,9 @@
     class Component extends View {
         constructor(options = {}) {
             super(...arguments);
-            // Extend "this" with options, mapping componentOptions keys.
-            Object.keys(options).forEach(key => {
-                if (componentOptions[key]) this[key] = options[key];
+            // Extend "this" with options.
+            componentOptions.forEach(key => {
+                if (key in options) this[key] = options[key];
             });
             // Store options by default.
             this.options = options;
@@ -972,20 +976,22 @@
             return this;
         }
 
-        /*
-         * Tell if component is a container.
+        /**
+         * Tell if `Component` is a container.
          * In which case, it will not have an element by itself.
          * It will render a single expression which is expected to return a single component as child.
          * `this.el` will be a reference to that child component's element.
          * @return {boolean}
+         * @private
          */
         isContainer() {
             return !!(!this.tag && this.template);
         }
 
-        /*
-         * Override. We don't want to ensure an element on instantiation.
+        /**
+         * Override super method. We don't want to ensure an element on instantiation.
          * We will provide it later.
+         * @private
          */
         ensureElement() {
             // If el is provided, delegate events.
@@ -996,18 +1002,25 @@
             }
         }
 
-        /*
-         * Find view's element on parent node, using its data attribute.
-         * @param parent {node} The parent node.
-         * @return {node} The component's element.
+        /**
+         * 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}"]`);
         }
 
-        /*
-         * Eval attributes expressions.
-         * @return {object} Object containing add, remove and html properties.
+        /**
+         * 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 = {};
@@ -1046,11 +1059,13 @@
             return { add, remove, html : html.join(' ') };
         }
 
-        /*
+        /**
          * Used internally on the render process.
-         * Attach the view to the dom element.
+         * 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.
          * @param parent {node} The parent node.
          * @return {Rasti.Component} The component instance.
+         * @private
          */
         hydrate(parent) {
             // Listen to model changes and call onChange.
@@ -1058,13 +1073,13 @@
             // Listen to state changes and call onChange.
             if (this.state) this.subscribe(this.state);
 
-            if (!this.isContainer()) {
+            if (this.isContainer()) {
+                this.children[0].hydrate(parent);
+                this.el = this.children[0].el;
+            } else {
                 this.el = this.findElement(parent);
                 this.delegateEvents();
                 this.children.forEach(child => child.hydrate(this.el));
-            } else {
-                this.children[0].hydrate(parent);
-                this.el = this.children[0].el;
             }
             // Call `onRender` lifecycle method.
             this.onRender.call(this, Component.RENDER_TYPE_HYDRATE);
@@ -1072,30 +1087,38 @@
             return this;
         }
 
-        /*
-         * Used internally in the render process.
-         * Reuse a view that has `key` when its parent is rendered.
+        /**
+         * 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.
+         * @private
          */
         recycle(parent) {
             // If component is a container, call recycle on its child.
-            if (this.isContainer()) return this.children[0].recycle(parent);
-            // 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);
+            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;
         }
 
-        /*
-         * Override. Add some custom logic to super `destroy` method.
+        /**
+         * 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.
          */
         destroy() {
+            // Call super destroy method.
             super.destroy.apply(this, arguments);
             // Set destroyed flag to prevent a last render after destroyed.
             this.destroyed = true;
@@ -1124,8 +1147,11 @@
         }
 
         /**
-         * Lifecycle method. Called when the view is rendered.
-         * @param type {string} The render type. Can be `render`, `hydrate` or `recycle`.
+         * 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`.
          */
         onRender() {}
 
@@ -1207,22 +1233,26 @@
                 `<${tag} ${attributes} />`;
         }
 
-        /*
-         * View render method.
+        /**
+         * 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 the active element is inside the component, it will retain focus after the render.  
+         * @return {Rasti.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);
+                return this;
+            }
+            // Update attributes.
             if (!this.isContainer()) {
-                // 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);
-                    return this;
-                }
-                // Set `this.el` attributes.
                 const attributes = this.getAttributes();
                 // Remove attributes.
                 Object.keys(attributes.remove).forEach(key => {
@@ -1233,7 +1263,7 @@
                     this.el.setAttribute(key, attributes.add[key]);
                 });
             }
-            // Check for `template` to see if view has innerHTML.
+            // Check for `template` to see if view has innerHTML or a child component.
             if (this.template) {
                 // Store active element.
                 const activeElement = document.activeElement;
@@ -1274,8 +1304,8 @@
                         this.addChild(nextChildren[0]).hydrate(fragment.content);
                         // Get next child element.
                         const nextEl = fragment.content.children[0];
-                        // If `this.el` is present, replace it with nextEl.
-                        if (this.el) this.el.replaceWith(nextEl);
+                        // Replace `this.el` with nextEl.
+                        this.el.replaceWith(nextEl);
                         // Set `this.el` to nextEl.
                         this.el = nextEl;
                     } else if (recycledChildren[0]) {
@@ -1311,10 +1341,10 @@
         }
 
         /**
-         * Mark a string as safe HTML to be rendered.
-         * Normally you don't need to use this method, as Rasti will automatically mark strings 
-         * as safe HTML when the component is @link{#module_component_create created} and when 
-         * using the @link{#module_component__partial Component.partial} method.
+         * Mark a string as safe HTML to be rendered.  
+         * Normally you don't need to use this method, as Rasti will automatically mark string literals 
+         * as safe HTML when the component is {@link #module_component_create created} and when 
+         * using the {@link #module_component__partial Component.partial} method.  
          * 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 
@@ -1428,8 +1458,8 @@
          *   // 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}>`
+         *           ${({ options, partial }) => options.items.map(
+         *               item => partial`<${Button}>${item.label}</${Button}>`
          *           )}
          *       </nav>
          *   `;
@@ -1448,11 +1478,11 @@
          *           ${self => self.renderChildren()}
          *       </button>
          *   `;
-         *   // Create a container using the button component
+         *   // Create a container that renders a Button component.
          *   const ButtonOk = Component.create`
          *       <${Button} className="ok">Ok</${Button}>
          *   `;
-         *   // Create a button component using a function
+         *   // Create a container that renders a Button component, using a function.
          *   const ButtonCancel = Component.create(() => Button.mount({
          *       className: 'cancel',
          *       renderChildren: () => 'Cancel'

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}static sanitize(t){return`${t}`.replace(/[&<>"']/g,(t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"}[t])))}}n.uid=0;const r=t=>t.reduce(((t,e)=>(Array.isArray(e)?t.push(...r(e)):t.push(e),t)),[]);class h{constructor(t){this.value=t}toString(){return this.value}}const l=(t,e)=>s(t,e,e),o=(t,e)=>t.reduce(((t,s,i)=>(t.push(s),void 0!==e[i]&&t.push(p.PLACEHOLDER_EXPRESSION(i)),t)),[]).join(""),a=(t,e)=>{const s=p.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(p.markAsSafeHTML(s),e[r[1]]),h=r.index+r[0].length}return n.push(p.markAsSafeHTML(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},u=(t,e)=>{const s=p.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}=d(arguments,e);if(!(t.prototype instanceof p))return h;let o;if(n){if(t!==n)return h;const s=a(u(i,e),e);o=function(){return r(s.map((t=>l(t,this))))}}return e.push((function(){const e=c(s,(t=>l(t,this))).all;return o&&(e.renderChildren=o.bind(this)),t.mount(e)})),p.PLACEHOLDER_EXPRESSION(e.length-1)}))},d=(t,e)=>{const s=p.PLACEHOLDER_EXPRESSION("(\\d+)"),[i,n,r,h,l,o,a,c,u,d]=t,E={raw:i,attributes:[]};let f;n?(E.tag=void 0!==r?e[r]:n,E.inner=l,E.close=void 0!==a?e[a]:o,f=h):(E.tag=void 0!==u?e[u]:c,f=d);const y=new RegExp(`(${s}|[\\w-]+)(?:=(["']?)(?:${s}|((?:.?(?!["']?\\s+(?:\\S+)=|\\s*/?[>"']))+.))\\3)?`,"g");let g;for(;null!==(g=y.exec(f));){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},E={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},f={key:!0,state:!0,onCreate:!0,onChange:!0,onRender:!0};class p extends n{constructor(t={}){super(...arguments),Object.keys(t).forEach((e=>{f[e]&&(this[e]=t[e])})),this.options=t,this.partial=this.partial.bind(this),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(`[${p.DATA_ATTRIBUTE_UID}="${this.uid}"]`)}getAttributes(){const t={},e={},i=[],n={[p.DATA_ATTRIBUTE_UID]:this.uid};this.attributes&&Object.assign(n,s(this.attributes,this));const r=this.previousAttributes||{};return this.previousAttributes=n,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(`${p.sanitize(s)}="${p.sanitize(r)}"`))})),Object.keys(r).forEach((t=>{t in n||(e[t]=!0)})),{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,p.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,p.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(a(u(o(t,e),e),e).map((t=>l(t,this))))}getRecyclePlaceholder(){if(this.isContainer())return this.children[0].getRecyclePlaceholder();const t=s(this.tag,this)||"div",e=`${p.DATA_ATTRIBUTE_UID}="${this.uid}"`;return this.template||!E[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||!E[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,p.RENDER_TYPE_RENDER),this}static markAsSafeHTML(t){return new h(t)}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=p.PLACEHOLDER_EXPRESSION("(\\d+)");let i,n,E,f;"function"==typeof t&&(e=[t],t=["",""]);const y=u(o(t,e),e);let g=y.match(new RegExp(`^\\s*<([a-z]+[1-6]?|${s})([^>]*)>([\\s\\S]*?)</(\\1|${s})>\\s*$|^\\s*<([a-z]+[1-6]?|${s})([^>]*)/>\\s*$`));if(g){const{tag:t,attributes:s,inner:o,close:u}=d(g,e);if(i=function(){return p.sanitize(l(t,this))},n=function(){return c(s,(t=>l(t,this))).attributes},E=function(){const t=c(s,(t=>l(t,this))).events;return Object.keys(t).reduce(((e,s)=>{const i=l(t[s],this);return Object.keys(i).forEach((t=>{e[`${s}${"&"===t?"":` ${t}`}`]=i[t]})),e}),{})},u){const t=o?a(o,e):[];f=function(e){return r(t.map((t=>l(t,this)))).map((t=>null!=t&&!1!==t&&!0!==t?t instanceof h?t:t instanceof p?e(t):p.sanitize(t):"")).join("")}}}else{if(g=y.match(new RegExp(`^\\s*${s}\\s*$`)),!g)throw new SyntaxError("Invalid component");f=function(t){return t(l(e[g[1]],this)).toString()}}return this.extend({tag:i,attributes:n,events:E,template:f})}}p.PLACEHOLDER_EXPRESSION=t=>`__RASTI_{${t}}__`,p.DATA_ATTRIBUTE_UID="data-rasti-uid",p.RENDER_TYPE_HYDRATE="hydrate",p.RENDER_TYPE_RECYCLE="recycle",p.RENDER_TYPE_RENDER="render",t.Component=p,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","tag","attributes","events","model","template","onDestroy"];class n extends e{constructor(t={}){super(),this.preinitialize.apply(this,arguments),this.uid="rasti-"+ ++n.uid,this.delegatedEventListeners=[],this.children=[],this.destroyQueue=[],i.forEach((e=>{e in t&&(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}static sanitize(t){return`${t}`.replace(/[&<>"']/g,(t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"}[t])))}}n.uid=0;const r=t=>t.reduce(((t,e)=>(Array.isArray(e)?t.push(...r(e)):t.push(e),t)),[]);class h{constructor(t){this.value=t}toString(){return this.value}}const l=(t,e)=>s(t,e,e),o=(t,e)=>t.reduce(((t,s,i)=>(t.push(s),void 0!==e[i]&&t.push(p.PLACEHOLDER_EXPRESSION(i)),t)),[]).join(""),a=(t,e)=>{const s=p.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(p.markAsSafeHTML(s),e[r[1]]),h=r.index+r[0].length}return n.push(p.markAsSafeHTML(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},u=(t,e)=>{const s=p.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}=d(arguments,e);if(!(t.prototype instanceof p))return h;let o;if(n){if(t!==n)return h;const s=a(u(i,e),e);o=function(){return r(s.map((t=>l(t,this))))}}return e.push((function(){const e=c(s,(t=>l(t,this))).all;return o&&(e.renderChildren=o.bind(this)),t.mount(e)})),p.PLACEHOLDER_EXPRESSION(e.length-1)}))},d=(t,e)=>{const s=p.PLACEHOLDER_EXPRESSION("(\\d+)"),[i,n,r,h,l,o,a,c,u,d]=t,E={raw:i,attributes:[]};let f;n?(E.tag=void 0!==r?e[r]:n,E.inner=l,E.close=void 0!==a?e[a]:o,f=h):(E.tag=void 0!==u?e[u]:c,f=d);const y=new RegExp(`(${s}|[\\w-]+)(?:=(["']?)(?:${s}|((?:.?(?!["']?\\s+(?:\\S+)=|\\s*/?[>"']))+.))\\3)?`,"g");let g;for(;null!==(g=y.exec(f));){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},E={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},f=["key","state","onCreate","onChange","onRender"];class p extends n{constructor(t={}){super(...arguments),f.forEach((e=>{e in t&&(this[e]=t[e])})),this.options=t,this.partial=this.partial.bind(this),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(`[${p.DATA_ATTRIBUTE_UID}="${this.uid}"]`)}getAttributes(){const t={},e={},i=[],n={[p.DATA_ATTRIBUTE_UID]:this.uid};this.attributes&&Object.assign(n,s(this.attributes,this));const r=this.previousAttributes||{};return this.previousAttributes=n,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(`${p.sanitize(s)}="${p.sanitize(r)}"`))})),Object.keys(r).forEach((t=>{t in n||(e[t]=!0)})),{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,p.RENDER_TYPE_HYDRATE),this}recycle(t){if(this.isContainer())this.children[0].recycle(t);else{this.findElement(t).replaceWith(this.el)}return this.onRender.call(this,p.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(a(u(o(t,e),e),e).map((t=>l(t,this))))}getRecyclePlaceholder(){if(this.isContainer())return this.children[0].getRecyclePlaceholder();const t=s(this.tag,this)||"div",e=`${p.DATA_ATTRIBUTE_UID}="${this.uid}"`;return this.template||!E[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||!E[t]?`<${t} ${e}>${i}</${t}>`:`<${t} ${e} />`}render(){if(this.destroyed)return this;if(!this.el){const t=this.createElement("template");return t.innerHTML=this,this.hydrate(t.content),this}if(!this.isContainer()){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.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,p.RENDER_TYPE_RENDER),this}static markAsSafeHTML(t){return new h(t)}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=p.PLACEHOLDER_EXPRESSION("(\\d+)");let i,n,E,f;"function"==typeof t&&(e=[t],t=["",""]);const y=u(o(t,e),e);let g=y.match(new RegExp(`^\\s*<([a-z]+[1-6]?|${s})([^>]*)>([\\s\\S]*?)</(\\1|${s})>\\s*$|^\\s*<([a-z]+[1-6]?|${s})([^>]*)/>\\s*$`));if(g){const{tag:t,attributes:s,inner:o,close:u}=d(g,e);if(i=function(){return p.sanitize(l(t,this))},n=function(){return c(s,(t=>l(t,this))).attributes},E=function(){const t=c(s,(t=>l(t,this))).events;return Object.keys(t).reduce(((e,s)=>{const i=l(t[s],this);return Object.keys(i).forEach((t=>{e[`${s}${"&"===t?"":` ${t}`}`]=i[t]})),e}),{})},u){const t=o?a(o,e):[];f=function(e){return r(t.map((t=>l(t,this)))).map((t=>null!=t&&!1!==t&&!0!==t?t instanceof h?t:t instanceof p?e(t):p.sanitize(t):"")).join("")}}}else{if(g=y.match(new RegExp(`^\\s*${s}\\s*$`)),!g)throw new SyntaxError("Invalid component");f=function(t){return t(l(e[g[1]],this)).toString()}}return this.extend({tag:i,attributes:n,events:E,template:f})}}p.PLACEHOLDER_EXPRESSION=t=>`__RASTI_{${t}}__`,p.DATA_ATTRIBUTE_UID="data-rasti-uid",p.RENDER_TYPE_HYDRATE="hydrate",p.RENDER_TYPE_RECYCLE="recycle",p.RENDER_TYPE_RENDER="render",t.Component=p,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}));