rasti 3.0.0-alpha.0 → 3.0.0-alpha.2

package/es/View.js

@@ -15,7 +15,7 @@ const viewOptions = {
 };
 
 /**
- * - Listens for changes and renders UI.
+ * - Listens for changes and renders the UI.
  * - Handles user input and interactivity.
  * - Sends captured input to the model.
  *
@@ -25,16 +25,16 @@ const viewOptions = {
  * 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';
  * 
@@ -183,15 +183,15 @@ class View extends Emitter {
      * Called from the constructor if `this.el` is undefined, to ensure
      * the view has a root element.
      * @param {string} tag Tag for the element. Default to `div`
-     * @param {object} attrs Attributes for the element.
+     * @param {object} attributes Attributes for the element.
      * @return {node} The created element.
      */
-    createElement(tag = 'div', attrs = {}) {
+    createElement(tag = 'div', attributes = {}) {
         // Create DOM element.
         let el = document.createElement(tag);
         // Add element attributes.
-        Object.keys(attrs)
-            .forEach(key => el.setAttribute(key, attrs[key]));
+        Object.keys(attributes)
+            .forEach(key => el.setAttribute(key, attributes[key]));
 
         return el;
     }
@@ -207,24 +207,39 @@ class View extends Emitter {
     }
 
     /**
-     * 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) {
@@ -274,7 +289,7 @@ class View extends Emitter {
     /**
      * 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() {
@@ -290,22 +305,43 @@ class View extends Emitter {
     /**
      * 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 
-     * 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.
+     * 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.  
+     * 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.
      */
     render() {
         if (this.template) this.el.innerHTML = this.template(this.model);
         // Return `this` for chaining.
         return this;
     }
+
+    /**
+     * Escape HTML entities in a string.
+     * Use method to sanitize user-generated content before inserting it into the DOM.
+     * Override this method to provide a custom escape function.
+     * This method is used by `Component` to escape template interpolations.
+     * @static
+     * @param {string} str String to escape.
+     * @return {string} Escaped string.
+     */
+    static sanitize(value) {
+        return `${value}`.replace(/[&<>"']/g, match => ({
+            '&' : '&amp;',
+            '<' : '&lt;',
+            '>' : '&gt;',
+            '"' : '&quot;',
+            '\'' : '&#039;'
+        }[match]));
+    }
 }
 
 /*

package/es/index.js

@@ -3,3 +3,4 @@ export { default as Model } from './Model.js';
 export { default as View } from './View.js';
 export { default as Component } from './Component.js';
 import './utils/getResult.js';
+import './utils/deepFlat.js';

package/es/utils/deepFlat.js

@@ -0,0 +1,12 @@
+/*
+ * 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;
+}, []);
+
+export { deepFlat as default };

package/lib/Component.cjs

@@ -2,8 +2,22 @@
 
 var View = require('./View.cjs');
 var utils_getResult = require('./utils/getResult.cjs');
+var utils_deepFlat = require('./utils/deepFlat.cjs');
 require('./Emitter.cjs');
 
+/*
+ * Wrapper class for HTML strings marked as safe.
+ */
+class SafeHTML {
+    constructor(value) {
+        this.value = value;
+    }
+
+    toString() {
+        return this.value;
+    }
+}
+
 /*
  * Same as getResult, but pass context as argument to the expression.
  * Used to evaluate expressions in the context of a component.
@@ -11,7 +25,7 @@ require('./Emitter.cjs');
  * @param {any} context The context to call the expression with.
  * @return {any} The result of the evaluated expression.
  */
-const renderExpression = (expression, context) => utils_getResult(expression, context, context);
+const getExpressionResult = (expression, context) => utils_getResult(expression, context, context);
 
 /*
  * Generate string with placeholders for interpolated expressions.
@@ -46,10 +60,10 @@ const splitPlaceholders = (main, expressions) => {
     // so all the components are added as children by the parent component.
     while ((match = regExp.exec(main)) !== null) {
         const before = main.slice(lastIndex, match.index);
-        out.push(before, expressions[match[1]]);
+        out.push(new SafeHTML(before), expressions[match[1]]);
         lastIndex = match.index + match[0].length;
     }
-    out.push(main.slice(lastIndex));
+    out.push(new SafeHTML(main.slice(lastIndex)));
 
     return out;
 };
@@ -57,15 +71,15 @@ const splitPlaceholders = (main, expressions) => {
 /*
  * Expand attributes.
  * @param attributes {array} Array of attributes as key, value pairs.
- * @param renderExpression {function} Function to render expressions.
+ * @param getExpressionResult {function} Function to render expressions.
  * @return {object}
  * @property {object} all All attributes.
  * @property {object} events Event listeners.
  * @property {object} attributes Attributes.
  */
-const expandAttributes = (attributes, renderExpression) => {
+const expandAttributes = (attributes, getExpressionResult) => {
     const out = attributes.reduce((out, pair) => {
-        const attribute = renderExpression(pair[0]);
+        const attribute = getExpressionResult(pair[0]);
         // Attribute without value. 
         if (pair.length === 1) {
             if (typeof attribute === 'object') {
@@ -77,7 +91,7 @@ const expandAttributes = (attributes, renderExpression) => {
             }
         } else {
             // Attribute with value.
-            const value = renderExpression(pair[1]);
+            const value = getExpressionResult(pair[1]);
             out.all[attribute] = value;
         }
 
@@ -128,12 +142,12 @@ const expandComponents = (main, expressions) => {
                 const list = splitPlaceholders(expandComponents(inner, expressions), expressions);
                 // Create renderChildren function.
                 renderChildren = function() {
-                    return list.map(item => renderExpression(item, this)).flat();
+                    return utils_deepFlat(list.map(item => getExpressionResult(item, this)));
                 };
             }
             // Create mount function.
             const mount = function() {
-                const options = expandAttributes(attributes, value => renderExpression(value, this)).all;
+                const options = expandAttributes(attributes, value => getExpressionResult(value, this)).all;
                 // Add renderChildren function to options.
                 if (renderChildren) options.renderChildren = renderChildren.bind(this);
                 // Mount component.
@@ -197,6 +211,14 @@ const parseMatch = (match, expressions) => {
     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.
  */
@@ -208,26 +230,19 @@ const componentOptions = {
     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.
@@ -326,9 +341,11 @@ class Component extends View {
         const attributes = { [Component.DATA_ATTRIBUTE_UID] : this.uid };
 
         if (this.attributes) Object.assign(attributes, utils_getResult(this.attributes, this));
+        // Store previous attributes.
+        const previousAttributes = this.previousAttributes || {};
+        this.previousAttributes = attributes;
 
         Object.keys(attributes).forEach(key => {
-            // Evaluate attribute value.
             let value = attributes[key];
             // Transform bool attribute values
             if (value === false) {
@@ -340,7 +357,13 @@ class Component extends View {
                 if (value === null || typeof value === 'undefined') value = '';
 
                 add[key] = value;
-                html.push(`${key}="${value}"`);
+                html.push(`${View.sanitize(key)}="${View.sanitize(value)}"`);
+            }
+        });
+        // Remove attributes that were in previousAttributes but not in current attributes.
+        Object.keys(previousAttributes).forEach(key => {
+            if (!(key in attributes)) {
+                remove[key] = true;
             }
         });
 
@@ -467,13 +490,11 @@ class Component extends View {
      * });
      */
     partial(strings, ...expressions) {
-        return splitPlaceholders(
-            expandComponents(
-                addPlaceholders(strings, expressions), expressions
-            ), expressions
-        ).map(item => {
-            return renderExpression(item, this);
-        }).flat();
+        return utils_deepFlat(
+            splitPlaceholders(
+                expandComponents(addPlaceholders(strings, expressions), expressions), expressions
+            ).map(item => getExpressionResult(item, this))
+        );
     }
 
     getRecyclePlaceholder() {
@@ -633,7 +654,6 @@ class Component extends View {
      * It instantiate the Component view using options, 
      * appends its element into the DOM (if `el` is provided).
      * And returns the view instance.
-     * <br><br> &#9888; **Security Notice:** `Component` utilizes `innerHTML` on a document fragment 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>
      * @static
      * @param {object} options The view options.
      * @param {node} el Dom element to append the view element.
@@ -659,38 +679,96 @@ class Component extends View {
     }
 
     /**
-     * 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+)');
@@ -713,18 +791,18 @@ class Component extends View {
             const { tag : tagExpression, attributes : attributesAndEvents, inner, close } = parseMatch(match, expressions);
             // Get tag, attributes.
             tag = function() {
-                return renderExpression(tagExpression, this);
+                return View.sanitize(getExpressionResult(tagExpression, this));
             };
             // Get attributes.
             attributes = function() {
-                return expandAttributes(attributesAndEvents, value => renderExpression(value, this)).attributes;
+                return expandAttributes(attributesAndEvents, value => getExpressionResult(value, this)).attributes;
             };
             // Get events.
             events = function() {
-                const onlyEvents = expandAttributes(attributesAndEvents, value => renderExpression(value, this)).events;
+                const onlyEvents = expandAttributes(attributesAndEvents, value => getExpressionResult(value, this)).events;
 
                 return Object.keys(onlyEvents).reduce((out, key) => {
-                    const typeListeners = renderExpression(onlyEvents[key], this);
+                    const typeListeners = getExpressionResult(onlyEvents[key], this);
 
                     Object.keys(typeListeners).forEach(selector => {
                         out[`${key}${selector === '&' ? '' : ` ${selector}`}`] = typeListeners[selector];
@@ -737,9 +815,11 @@ class Component extends View {
             if (close) {
                 const list = inner ? splitPlaceholders(inner, expressions) : [];
                 template = function(addChild) {
-                    return list.map(item => renderExpression(item, this)).flat().map(item => {
+                    return utils_deepFlat(list.map(item => getExpressionResult(item, this))).map(item => {
                         if (typeof item !== 'undefined' && item !== null && item !== false &&  item !== true) {
-                            return item instanceof Component ? addChild(item) : item;
+                            if (item instanceof SafeHTML) return item;
+                            if (item instanceof Component) return addChild(item);
+                            return View.sanitize(`${item}`);
                         }
                         return '';
                     }).join('');
@@ -753,7 +833,7 @@ class Component extends View {
                 // If there is only one expression and no tag, is a container.
                 template = function(addChild) {
                     // Replace expressions.
-                    return addChild(renderExpression(expressions[match[1]], this)).toString();
+                    return addChild(getExpressionResult(expressions[match[1]], this)).toString();
                 };
             } else {
                 throw new SyntaxError('Invalid component');

package/lib/Emitter.cjs

@@ -43,7 +43,8 @@ class Emitter {
      * @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.
@@ -64,6 +65,7 @@ class Emitter {
      * @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) {
@@ -86,7 +88,8 @@ class Emitter {
      * @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.
@@ -115,7 +118,8 @@ class Emitter {
      * @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.

package/lib/Model.cjs

@@ -12,13 +12,13 @@ var utils_getResult = require('./utils/getResult.cjs');
  * 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';
@@ -51,14 +51,14 @@ var utils_getResult = require('./utils/getResult.cjs');
  * 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 = utils_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.
@@ -67,7 +67,7 @@ class Model extends Emitter {
 
     /**
      * 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() {}