rasti 3.0.0-alpha.2 → 3.0.0

package/README.md

@@ -20,23 +20,23 @@
 ## Key Features  
 
 - **Declarative Components** 🌟  
-    Build dynamic UI components using intuitive template literals.  
+  Build dynamic UI components using intuitive template literals.  
 - **Event Delegation** 🎯  
-    Simplify event handling with built-in delegation.  
+  Simplify event handling with built-in delegation.  
 - **Model-View Binding** 🔗  
-    Keep your UI and data in sync with ease.  
+  Keep your UI and data in sync with ease.  
 - **Server-Side Rendering** 🌐  
-    Render as plain text for server-side use or static builds.  
+  Render as plain text for server-side use or static builds.  
 - **Lightweight and Fast** ⚡  
-    Minimal overhead with efficient rendering.  
+  Minimal overhead with efficient rendering.  
 - **Legacy Compatibility** 🕰️  
-    Seamlessly integrates into existing **Backbone.js** projects.  
+  Seamlessly integrates into existing **Backbone.js** projects.  
 - **Standards-Based** 📐  
-    Built on modern web standards, no tooling required.  
+  Built on modern web standards, no tooling required.  
 
 ## Getting Started
 
-### Using npm
+### Installing via npm
 
 ```bash
 $ npm install rasti
@@ -52,7 +52,7 @@ import { Model, Component } from 'rasti';
 import { Model, Component } from 'https://esm.run/rasti';
 ```
 
-### Using `<script>` tag
+### Using a `<script>` tag
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js"></script>
@@ -97,27 +97,27 @@ const routes = [
 // Create a Link component for navigation items.
 const Link = Component.create`
     <a href="${({ options }) => options.href}">
-        ${({ options }) => options.label}
+        ${({ options }) => options.renderChildren()}
     </a>
 `;
 
 // Create a Navigation component that renders Link components for each route.
 const Navigation = Component.create`
     <nav>
-        ${self => self.options.routes.map(
-            ({ label, href }) => self.partial`<${Link} ${{ label, href }} />`
+        ${({ options, partial }) => options.routes.map(
+            ({ label, href }) => partial`<${Link} href="${href}">${label}</${Link}>`
         )}
     </nav>
 `;
 
-// Create a Page component that includes the Navigation and displays the current route's label as the title.
-const Page = Component.create`
+// Create a Main component that includes the Navigation and displays the current route's label as the title.
+const Main = Component.create`
     <main>
         <${Navigation} routes=${({ options }) => options.routes} />
         <section>
             <h1>
-                ${({ state, options }) => options.routes.find(
-                    ({ href }) => href === (state.location || '#')
+                ${({ model, options }) => options.routes.find(
+                    ({ href }) => href === (model.location || '#')
                 ).label}
             </h1>
         </section>
@@ -130,24 +130,26 @@ 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 the Page component to the body, passing the routes and model as options.
-Page.mount({ routes, model }, document.body);
+// Mount the Main component to the body, passing the routes and model as options.
+Main.mount({ routes, model }, document.body);
 ```
 
 [Try it on CodePen](https://codepen.io/8tentaculos/pen/dyBMNbq?editors=0010)
 
 ## Why Choose **Rasti**?  
 
-### Why Choose Rasti?  
-
-- **Lightweight Applications**: Designed for streamlined apps, free from unnecessary overhead or tooling.  
-- **High-Performance Rendering**: Optimized for scenarios where speed matters, delivering fast updates and efficient rendering—ideal for large dynamic tables or datasets without needing virtual scrolling.  
-- **Seamless Legacy Integration**: Modernize your **Backbone.js** views progressively, enabling incremental improvements without a full rewrite.  
+**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:  
 
+- **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.  
 
 ## Example
 
-The rasti [GitHub repository](https://github.com/8tentaculos/rasti) includes, in the [example folder](https://github.com/8tentaculos/rasti/tree/master/example/todo), an example [TODO application](https://rasti.js.org/example/todo/index.html) that can be used as starter project.
+You can find a sample **TODO application** in the [example folder](https://github.com/8tentaculos/rasti/tree/master/example/todo) of the **Rasti** [GitHub repository](https://github.com/8tentaculos/rasti). This example serves as a great starting point for your own projects. Try it live [here](https://rasti.js.org/example/todo/index.html).
 
 ## API Documentation
 

package/dist/rasti.js

@@ -645,9 +645,9 @@
 
         /**
          * Escape HTML entities in a string.
-         * Use method to sanitize user-generated content before inserting it into the DOM.
+         * Use this 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.
+         * This method is inherited by {@link #module_component Component} and used to escape template interpolations.
          * @static
          * @param {string} str String to escape.
          * @return {string} Escaped string.
@@ -734,10 +734,10 @@
         // 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(new SafeHTML(before), expressions[match[1]]);
+            out.push(Component.markAsSafeHTML(before), expressions[match[1]]);
             lastIndex = match.index + match[0].length;
         }
-        out.push(new SafeHTML(main.slice(lastIndex)));
+        out.push(Component.markAsSafeHTML(main.slice(lastIndex)));
 
         return out;
     };
@@ -941,6 +941,8 @@
             });
             // Store options by default.
             this.options = options;
+            // Bind `partial` method to `this`.
+            this.partial = this.partial.bind(this);
             // Call lifecycle method.
             this.onCreate.apply(this, arguments);
         }
@@ -1031,7 +1033,7 @@
                     if (value === null || typeof value === 'undefined') value = '';
 
                     add[key] = value;
-                    html.push(`${View.sanitize(key)}="${View.sanitize(value)}"`);
+                    html.push(`${Component.sanitize(key)}="${Component.sanitize(value)}"`);
                 }
             });
             // Remove attributes that were in previousAttributes but not in current attributes.
@@ -1135,8 +1137,11 @@
 
         /**
          * Tagged template helper method.
-         * Used to create a partial template.
-         * It will return a one-dimensional array with strings and expressions.
+         * Used to create a partial template.  
+         * It will return a one-dimensional array with strings and expressions.  
+         * Components will be added as children by the parent component. Template strings literals 
+         * will be marked as safe HTML to be rendered.
+         * This method is bound to the component instance by default.
          * @param {TemplateStringsArray} strings - Template strings.
          * @param  {...any} expressions - Template expressions.
          * @return {Array} Array containing strings and expressions.
@@ -1157,7 +1162,7 @@
          *     renderHeader() {
          *         return this.partial`
          *             <header>
-         *                 <${Title}>${self => self.model.title}</${Title}>
+         *                 <${Title}>${({ model }) => model.title}</${Title}>
          *             </header>
          *         `;
          *     }
@@ -1305,6 +1310,20 @@
             return this;
         }
 
+        /**
+         * 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.
+         * Be sure that the string is safe to be rendered, as it will be inserted into the DOM without any sanitization.
+         * @static
+         * @param {string} value 
+         * @return {Rasti.SafeHTML} A safe HTML object.
+         */
+        static markAsSafeHTML(value) {
+            return new SafeHTML(value);
+        }
+
         /**
          * Helper method used to extend a `Component`, creating a subclass.
          * @static
@@ -1356,89 +1375,89 @@
          * 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.
          * - The template inner HTML will be used as the view's template.
-         *     ```javascript
-         *     const Button = Component.create`<button class="button">Click me</button>`;
-         *     ```
+         *   ```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>
-         *     `;
-         *     ```
+         *   ```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} />
-         *     `;
-         *     ```
+         * - Boolean attributes should be passed in the format `attribute="${() => true}"`. `false` attributes won't be rendered. `true` attributes will be rendered without a value.
+         *   ```javascript
+         *   const Input = Component.create`
+         *       <input type="text" disabled=${({ options }) => options.disabled} />
+         *   `;
+         *   ```
          * - 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>
-         *     `;
-         *     ```
+         *   ```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>
-         *     `;
-         *     ```
+         *   ```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'
-         *     }));
-         *     ```
+         *   ```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.
@@ -1465,7 +1484,7 @@
                 const { tag : tagExpression, attributes : attributesAndEvents, inner, close } = parseMatch(match, expressions);
                 // Get tag, attributes.
                 tag = function() {
-                    return View.sanitize(getExpressionResult(tagExpression, this));
+                    return Component.sanitize(getExpressionResult(tagExpression, this));
                 };
                 // Get attributes.
                 attributes = function() {
@@ -1493,7 +1512,7 @@
                             if (typeof item !== 'undefined' && item !== null && item !== false &&  item !== true) {
                                 if (item instanceof SafeHTML) return item;
                                 if (item instanceof Component) return addChild(item);
-                                return View.sanitize(`${item}`);
+                                return Component.sanitize(item);
                             }
                             return '';
                         }).join('');

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 o=(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(""),a=(t,e)=>{const s=f.PLACEHOLDER_EXPRESSION("(\\d+)"),i=new RegExp(`${s}`,"g"),n=[];let r,o=0;for(;null!==(r=i.exec(t));){const s=t.slice(o,r.index);n.push(new h(s),e[r[1]]),o=r.index+r[0].length}return n.push(new h(t.slice(o))),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=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:h}=d(arguments,e);if(!(t.prototype instanceof f))return h;let l;if(n){if(t!==n)return h;const s=a(u(i,e),e);l=function(){return r(s.map((t=>o(t,this))))}}return e.push((function(){const e=c(s,(t=>o(t,this))).all;return l&&(e.renderChildren=l.bind(this)),t.mount(e)})),f.PLACEHOLDER_EXPRESSION(e.length-1)}))},d=(t,e)=>{const s=f.PLACEHOLDER_EXPRESSION("(\\d+)"),[i,n,r,h,o,l,a,c,u,d]=t,E={raw:i,attributes:[]};let p;n?(E.tag=void 0!==r?e[r]:n,E.inner=o,E.close=void 0!==a?e[a]:l,p=h):(E.tag=void 0!==u?e[u]:c,p=d);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},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},p={key:!0,state:!0,onCreate:!0,onChange:!0,onRender:!0};class f extends n{constructor(t={}){super(...arguments),Object.keys(t).forEach((e=>{p[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=[],r={[f.DATA_ATTRIBUTE_UID]:this.uid};this.attributes&&Object.assign(r,s(this.attributes,this));const h=this.previousAttributes||{};return this.previousAttributes=r,Object.keys(r).forEach((s=>{let h=r[s];!1===h?e[s]=!0:!0===h?(t[s]="",i.push(s)):(null==h&&(h=""),t[s]=h,i.push(`${n.sanitize(s)}="${n.sanitize(h)}"`))})),Object.keys(h).forEach((t=>{t in r||(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,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(a(u(l(t,e),e),e).map((t=>o(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||!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,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,E,p,y;"function"==typeof t&&(e=[t],t=["",""]);const g=u(l(t,e),e);let b=g.match(new RegExp(`^\\s*<([a-z]+[1-6]?|${s})([^>]*)>([\\s\\S]*?)</(\\1|${s})>\\s*$|^\\s*<([a-z]+[1-6]?|${s})([^>]*)/>\\s*$`));if(b){const{tag:t,attributes:s,inner:l,close:u}=d(b,e);if(i=function(){return n.sanitize(o(t,this))},E=function(){return c(s,(t=>o(t,this))).attributes},p=function(){const t=c(s,(t=>o(t,this))).events;return Object.keys(t).reduce(((e,s)=>{const i=o(t[s],this);return Object.keys(i).forEach((t=>{e[`${s}${"&"===t?"":` ${t}`}`]=i[t]})),e}),{})},u){const t=l?a(l,e):[];y=function(e){return r(t.map((t=>o(t,this)))).map((t=>null!=t&&!1!==t&&!0!==t?t instanceof h?t:t instanceof f?e(t):n.sanitize(`${t}`):"")).join("")}}}else{if(b=g.match(new RegExp(`^\\s*${s}\\s*$`)),!b)throw new SyntaxError("Invalid component");y=function(t){return t(o(e[b[1]],this)).toString()}}return this.extend({tag:i,attributes:E,events:p,template:y})}}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 o=Object.keys(h);if(o.length&&(this._pending=["change",this,h,...n]),o.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}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}));

package/es/Component.js

@@ -58,10 +58,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(new SafeHTML(before), expressions[match[1]]);
+        out.push(Component.markAsSafeHTML(before), expressions[match[1]]);
         lastIndex = match.index + match[0].length;
     }
-    out.push(new SafeHTML(main.slice(lastIndex)));
+    out.push(Component.markAsSafeHTML(main.slice(lastIndex)));
 
     return out;
 };
@@ -265,6 +265,8 @@ class Component extends View {
         });
         // Store options by default.
         this.options = options;
+        // Bind `partial` method to `this`.
+        this.partial = this.partial.bind(this);
         // Call lifecycle method.
         this.onCreate.apply(this, arguments);
     }
@@ -355,7 +357,7 @@ class Component extends View {
                 if (value === null || typeof value === 'undefined') value = '';
 
                 add[key] = value;
-                html.push(`${View.sanitize(key)}="${View.sanitize(value)}"`);
+                html.push(`${Component.sanitize(key)}="${Component.sanitize(value)}"`);
             }
         });
         // Remove attributes that were in previousAttributes but not in current attributes.
@@ -459,8 +461,11 @@ class Component extends View {
 
     /**
      * Tagged template helper method.
-     * Used to create a partial template.
-     * It will return a one-dimensional array with strings and expressions.
+     * Used to create a partial template.  
+     * It will return a one-dimensional array with strings and expressions.  
+     * Components will be added as children by the parent component. Template strings literals 
+     * will be marked as safe HTML to be rendered.
+     * This method is bound to the component instance by default.
      * @param {TemplateStringsArray} strings - Template strings.
      * @param  {...any} expressions - Template expressions.
      * @return {Array} Array containing strings and expressions.
@@ -481,7 +486,7 @@ class Component extends View {
      *     renderHeader() {
      *         return this.partial`
      *             <header>
-     *                 <${Title}>${self => self.model.title}</${Title}>
+     *                 <${Title}>${({ model }) => model.title}</${Title}>
      *             </header>
      *         `;
      *     }
@@ -629,6 +634,20 @@ class Component extends View {
         return this;
     }
 
+    /**
+     * 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.
+     * Be sure that the string is safe to be rendered, as it will be inserted into the DOM without any sanitization.
+     * @static
+     * @param {string} value 
+     * @return {Rasti.SafeHTML} A safe HTML object.
+     */
+    static markAsSafeHTML(value) {
+        return new SafeHTML(value);
+    }
+
     /**
      * Helper method used to extend a `Component`, creating a subclass.
      * @static
@@ -680,89 +699,89 @@ class Component extends View {
      * 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.
      * - The template inner HTML will be used as the view's template.
-     *     ```javascript
-     *     const Button = Component.create`<button class="button">Click me</button>`;
-     *     ```
+     *   ```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>
-     *     `;
-     *     ```
+     *   ```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} />
-     *     `;
-     *     ```
+     * - Boolean attributes should be passed in the format `attribute="${() => true}"`. `false` attributes won't be rendered. `true` attributes will be rendered without a value.
+     *   ```javascript
+     *   const Input = Component.create`
+     *       <input type="text" disabled=${({ options }) => options.disabled} />
+     *   `;
+     *   ```
      * - 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>
-     *     `;
-     *     ```
+     *   ```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>
-     *     `;
-     *     ```
+     *   ```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'
-     *     }));
-     *     ```
+     *   ```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.
@@ -789,7 +808,7 @@ class Component extends View {
             const { tag : tagExpression, attributes : attributesAndEvents, inner, close } = parseMatch(match, expressions);
             // Get tag, attributes.
             tag = function() {
-                return View.sanitize(getExpressionResult(tagExpression, this));
+                return Component.sanitize(getExpressionResult(tagExpression, this));
             };
             // Get attributes.
             attributes = function() {
@@ -817,7 +836,7 @@ class Component extends View {
                         if (typeof item !== 'undefined' && item !== null && item !== false &&  item !== true) {
                             if (item instanceof SafeHTML) return item;
                             if (item instanceof Component) return addChild(item);
-                            return View.sanitize(`${item}`);
+                            return Component.sanitize(item);
                         }
                         return '';
                     }).join('');

package/es/View.js

@@ -326,9 +326,9 @@ class View extends Emitter {
 
     /**
      * Escape HTML entities in a string.
-     * Use method to sanitize user-generated content before inserting it into the DOM.
+     * Use this 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.
+     * This method is inherited by {@link #module_component Component} and used to escape template interpolations.
      * @static
      * @param {string} str String to escape.
      * @return {string} Escaped string.

package/lib/Component.cjs

@@ -60,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(new SafeHTML(before), expressions[match[1]]);
+        out.push(Component.markAsSafeHTML(before), expressions[match[1]]);
         lastIndex = match.index + match[0].length;
     }
-    out.push(new SafeHTML(main.slice(lastIndex)));
+    out.push(Component.markAsSafeHTML(main.slice(lastIndex)));
 
     return out;
 };
@@ -267,6 +267,8 @@ class Component extends View {
         });
         // Store options by default.
         this.options = options;
+        // Bind `partial` method to `this`.
+        this.partial = this.partial.bind(this);
         // Call lifecycle method.
         this.onCreate.apply(this, arguments);
     }
@@ -357,7 +359,7 @@ class Component extends View {
                 if (value === null || typeof value === 'undefined') value = '';
 
                 add[key] = value;
-                html.push(`${View.sanitize(key)}="${View.sanitize(value)}"`);
+                html.push(`${Component.sanitize(key)}="${Component.sanitize(value)}"`);
             }
         });
         // Remove attributes that were in previousAttributes but not in current attributes.
@@ -461,8 +463,11 @@ class Component extends View {
 
     /**
      * Tagged template helper method.
-     * Used to create a partial template.
-     * It will return a one-dimensional array with strings and expressions.
+     * Used to create a partial template.  
+     * It will return a one-dimensional array with strings and expressions.  
+     * Components will be added as children by the parent component. Template strings literals 
+     * will be marked as safe HTML to be rendered.
+     * This method is bound to the component instance by default.
      * @param {TemplateStringsArray} strings - Template strings.
      * @param  {...any} expressions - Template expressions.
      * @return {Array} Array containing strings and expressions.
@@ -483,7 +488,7 @@ class Component extends View {
      *     renderHeader() {
      *         return this.partial`
      *             <header>
-     *                 <${Title}>${self => self.model.title}</${Title}>
+     *                 <${Title}>${({ model }) => model.title}</${Title}>
      *             </header>
      *         `;
      *     }
@@ -631,6 +636,20 @@ class Component extends View {
         return this;
     }
 
+    /**
+     * 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.
+     * Be sure that the string is safe to be rendered, as it will be inserted into the DOM without any sanitization.
+     * @static
+     * @param {string} value 
+     * @return {Rasti.SafeHTML} A safe HTML object.
+     */
+    static markAsSafeHTML(value) {
+        return new SafeHTML(value);
+    }
+
     /**
      * Helper method used to extend a `Component`, creating a subclass.
      * @static
@@ -682,89 +701,89 @@ class Component extends View {
      * 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.
      * - The template inner HTML will be used as the view's template.
-     *     ```javascript
-     *     const Button = Component.create`<button class="button">Click me</button>`;
-     *     ```
+     *   ```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>
-     *     `;
-     *     ```
+     *   ```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} />
-     *     `;
-     *     ```
+     * - Boolean attributes should be passed in the format `attribute="${() => true}"`. `false` attributes won't be rendered. `true` attributes will be rendered without a value.
+     *   ```javascript
+     *   const Input = Component.create`
+     *       <input type="text" disabled=${({ options }) => options.disabled} />
+     *   `;
+     *   ```
      * - 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>
-     *     `;
-     *     ```
+     *   ```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>
-     *     `;
-     *     ```
+     *   ```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'
-     *     }));
-     *     ```
+     *   ```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.
@@ -791,7 +810,7 @@ class Component extends View {
             const { tag : tagExpression, attributes : attributesAndEvents, inner, close } = parseMatch(match, expressions);
             // Get tag, attributes.
             tag = function() {
-                return View.sanitize(getExpressionResult(tagExpression, this));
+                return Component.sanitize(getExpressionResult(tagExpression, this));
             };
             // Get attributes.
             attributes = function() {
@@ -819,7 +838,7 @@ class Component extends View {
                         if (typeof item !== 'undefined' && item !== null && item !== false &&  item !== true) {
                             if (item instanceof SafeHTML) return item;
                             if (item instanceof Component) return addChild(item);
-                            return View.sanitize(`${item}`);
+                            return Component.sanitize(item);
                         }
                         return '';
                     }).join('');

package/lib/View.cjs

@@ -328,9 +328,9 @@ class View extends Emitter {
 
     /**
      * Escape HTML entities in a string.
-     * Use method to sanitize user-generated content before inserting it into the DOM.
+     * Use this 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.
+     * This method is inherited by {@link #module_component Component} and used to escape template interpolations.
      * @static
      * @param {string} str String to escape.
      * @return {string} Escaped string.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rasti",
-    "version": "3.0.0-alpha.2",
+    "version": "3.0.0",
     "description": "Modern MVC for building user interfaces",
     "type": "module",
     "main": "lib/index.cjs",
@@ -30,7 +30,7 @@
         "posttest": "npm run lint",
         "lint": "eslint src test",
         "test": "mocha --require jsdom-global/register --reporter nyan test/*.js",
-        "docs:api": "jsdoc2md --property-list-format list --helper jsdoc2md/helper.cjs --partial jsdoc2md/header.hbs --partial jsdoc2md/sig-link.hbs --partial jsdoc2md/sig-link-html.hbs --partial jsdoc2md/sig-link-parent.hbs --partial jsdoc2md/link.hbs --files 'src/**/*.js' > docs/api.md"
+        "docs:api": "jsdoc2md --module-index-format grouped --helper jsdoc2md/helper.cjs --partial jsdoc2md/header.hbs --partial jsdoc2md/sig-link.hbs --partial jsdoc2md/sig-link-html.hbs --partial jsdoc2md/sig-link-parent.hbs --partial jsdoc2md/link.hbs --files 'src/**/*.js' > docs/api.md"
     },
     "repository": {
         "type": "git",

package/src/Component.js

@@ -57,10 +57,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(new SafeHTML(before), expressions[match[1]]);
+        out.push(Component.markAsSafeHTML(before), expressions[match[1]]);
         lastIndex = match.index + match[0].length;
     }
-    out.push(new SafeHTML(main.slice(lastIndex)));
+    out.push(Component.markAsSafeHTML(main.slice(lastIndex)));
 
     return out;
 };
@@ -264,6 +264,8 @@ export default class Component extends View {
         });
         // Store options by default.
         this.options = options;
+        // Bind `partial` method to `this`.
+        this.partial = this.partial.bind(this);
         // Call lifecycle method.
         this.onCreate.apply(this, arguments);
     }
@@ -354,7 +356,7 @@ export default class Component extends View {
                 if (value === null || typeof value === 'undefined') value = '';
 
                 add[key] = value;
-                html.push(`${View.sanitize(key)}="${View.sanitize(value)}"`);
+                html.push(`${Component.sanitize(key)}="${Component.sanitize(value)}"`);
             }
         });
         // Remove attributes that were in previousAttributes but not in current attributes.
@@ -458,8 +460,11 @@ export default class Component extends View {
 
     /**
      * Tagged template helper method.
-     * Used to create a partial template.
-     * It will return a one-dimensional array with strings and expressions.
+     * Used to create a partial template.  
+     * It will return a one-dimensional array with strings and expressions.  
+     * Components will be added as children by the parent component. Template strings literals 
+     * will be marked as safe HTML to be rendered.
+     * This method is bound to the component instance by default.
      * @param {TemplateStringsArray} strings - Template strings.
      * @param  {...any} expressions - Template expressions.
      * @return {Array} Array containing strings and expressions.
@@ -480,7 +485,7 @@ export default class Component extends View {
      *     renderHeader() {
      *         return this.partial`
      *             <header>
-     *                 <${Title}>${self => self.model.title}</${Title}>
+     *                 <${Title}>${({ model }) => model.title}</${Title}>
      *             </header>
      *         `;
      *     }
@@ -628,6 +633,20 @@ export default class Component extends View {
         return this;
     }
 
+    /**
+     * 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.
+     * Be sure that the string is safe to be rendered, as it will be inserted into the DOM without any sanitization.
+     * @static
+     * @param {string} value 
+     * @return {Rasti.SafeHTML} A safe HTML object.
+     */
+    static markAsSafeHTML(value) {
+        return new SafeHTML(value);
+    }
+
     /**
      * Helper method used to extend a `Component`, creating a subclass.
      * @static
@@ -679,89 +698,89 @@ export default class Component extends View {
      * 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.
      * - The template inner HTML will be used as the view's template.
-     *     ```javascript
-     *     const Button = Component.create`<button class="button">Click me</button>`;
-     *     ```
+     *   ```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>
-     *     `;
-     *     ```
+     *   ```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} />
-     *     `;
-     *     ```
+     * - Boolean attributes should be passed in the format `attribute="${() => true}"`. `false` attributes won't be rendered. `true` attributes will be rendered without a value.
+     *   ```javascript
+     *   const Input = Component.create`
+     *       <input type="text" disabled=${({ options }) => options.disabled} />
+     *   `;
+     *   ```
      * - 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>
-     *     `;
-     *     ```
+     *   ```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>
-     *     `;
-     *     ```
+     *   ```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'
-     *     }));
-     *     ```
+     *   ```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.
@@ -788,7 +807,7 @@ export default class Component extends View {
             const { tag : tagExpression, attributes : attributesAndEvents, inner, close } = parseMatch(match, expressions);
             // Get tag, attributes.
             tag = function() {
-                return View.sanitize(getExpressionResult(tagExpression, this));
+                return Component.sanitize(getExpressionResult(tagExpression, this));
             };
             // Get attributes.
             attributes = function() {
@@ -816,7 +835,7 @@ export default class Component extends View {
                         if (typeof item !== 'undefined' && item !== null && item !== false &&  item !== true) {
                             if (item instanceof SafeHTML) return item;
                             if (item instanceof Component) return addChild(item);
-                            return View.sanitize(`${item}`);
+                            return Component.sanitize(item);
                         }
                         return '';
                     }).join('');

package/src/View.js

@@ -326,9 +326,9 @@ export default class View extends Emitter {
 
     /**
      * Escape HTML entities in a string.
-     * Use method to sanitize user-generated content before inserting it into the DOM.
+     * Use this 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.
+     * This method is inherited by {@link #module_component Component} and used to escape template interpolations.
      * @static
      * @param {string} str String to escape.
      * @return {string} Escaped string.