rasti 3.0.0-alpha.1 → 3.0.0-alpha.2

package/README.md

@@ -104,8 +104,8 @@ const Link = Component.create`
 // Create a Navigation component that renders Link components for each route.
 const Navigation = Component.create`
     <nav>
-        ${({ options }) => options.routes.map(
-            ({ label, href }) => Link.mount({ label, href })
+        ${self => self.options.routes.map(
+            ({ label, href }) => self.partial`<${Link} ${{ label, href }} />`
         )}
     </nav>
 `;

package/dist/rasti.js

@@ -502,15 +502,15 @@
          * 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;
         }
@@ -631,8 +631,10 @@
          * 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>
+         * 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() {
@@ -640,6 +642,25 @@
             // 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]));
+        }
     }
 
     /*
@@ -658,6 +679,19 @@
         return acc;
     }, []);
 
+    /*
+     * 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.
@@ -665,7 +699,7 @@
      * @param {any} context The context to call the expression with.
      * @return {any} The result of the evaluated expression.
      */
-    const renderExpression = (expression, context) => getResult(expression, context, context);
+    const getExpressionResult = (expression, context) => getResult(expression, context, context);
 
     /*
      * Generate string with placeholders for interpolated expressions.
@@ -700,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(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;
     };
@@ -711,15 +745,15 @@
     /*
      * 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') {
@@ -731,7 +765,7 @@
                 }
             } else {
                 // Attribute with value.
-                const value = renderExpression(pair[1]);
+                const value = getExpressionResult(pair[1]);
                 out.all[attribute] = value;
             }
 
@@ -782,12 +816,12 @@
                     const list = splitPlaceholders(expandComponents(inner, expressions), expressions);
                     // Create renderChildren function.
                     renderChildren = function() {
-                        return deepFlat(list.map(item => renderExpression(item, this)));
+                        return 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.
@@ -981,9 +1015,11 @@
             const attributes = { [Component.DATA_ATTRIBUTE_UID] : this.uid };
 
             if (this.attributes) Object.assign(attributes, getResult(this.attributes, this));
+            // Store previous attributes.
+            const previousAttributes = this.previousAttributes || {};
+            this.previousAttributes = attributes;
 
             Object.keys(attributes).forEach(key => {
-                // Evaluate attribute value.
                 let value = attributes[key];
                 // Transform bool attribute values
                 if (value === false) {
@@ -995,7 +1031,13 @@
                     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;
                 }
             });
 
@@ -1122,13 +1164,11 @@
          * });
          */
         partial(strings, ...expressions) {
-            return deepFlat(splitPlaceholders(
-                expandComponents(
-                    addPlaceholders(strings, expressions), expressions
-                ), expressions
-            ).map(item => {
-                return renderExpression(item, this);
-            }));
+            return deepFlat(
+                splitPlaceholders(
+                    expandComponents(addPlaceholders(strings, expressions), expressions), expressions
+                ).map(item => getExpressionResult(item, this))
+            );
         }
 
         getRecyclePlaceholder() {
@@ -1288,7 +1328,6 @@
          * 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.
@@ -1370,7 +1409,7 @@
          *     // Create a navigation component. Add buttons as children. Iterate over items.
          *     const Navigation = Component.create`
          *         <nav>
-         *             ${(self) => self.options.items.map(
+         *             ${self => self.options.items.map(
          *                 item => self.partial`<${Button}>${item.label}</${Button}>`
          *             )}
          *         </nav>
@@ -1426,18 +1465,18 @@
                 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];
@@ -1450,9 +1489,11 @@
                 if (close) {
                     const list = inner ? splitPlaceholders(inner, expressions) : [];
                     template = function(addChild) {
-                        return deepFlat(list.map(item => renderExpression(item, this))).map(item => {
+                        return 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('');
@@ -1466,7 +1507,7 @@
                     // 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/dist/rasti.min.js

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

package/es/Component.js

@@ -3,6 +3,19 @@ import getResult from './utils/getResult.js';
 import deepFlat from './utils/deepFlat.js';
 import './Emitter.js';
 
+/*
+ * 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.
@@ -10,7 +23,7 @@ import './Emitter.js';
  * @param {any} context The context to call the expression with.
  * @return {any} The result of the evaluated expression.
  */
-const renderExpression = (expression, context) => getResult(expression, context, context);
+const getExpressionResult = (expression, context) => getResult(expression, context, context);
 
 /*
  * Generate string with placeholders for interpolated expressions.
@@ -45,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(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;
 };
@@ -56,15 +69,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') {
@@ -76,7 +89,7 @@ const expandAttributes = (attributes, renderExpression) => {
             }
         } else {
             // Attribute with value.
-            const value = renderExpression(pair[1]);
+            const value = getExpressionResult(pair[1]);
             out.all[attribute] = value;
         }
 
@@ -127,12 +140,12 @@ const expandComponents = (main, expressions) => {
                 const list = splitPlaceholders(expandComponents(inner, expressions), expressions);
                 // Create renderChildren function.
                 renderChildren = function() {
-                    return deepFlat(list.map(item => renderExpression(item, this)));
+                    return 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.
@@ -326,9 +339,11 @@ class Component extends View {
         const attributes = { [Component.DATA_ATTRIBUTE_UID] : this.uid };
 
         if (this.attributes) Object.assign(attributes, getResult(this.attributes, this));
+        // Store previous attributes.
+        const previousAttributes = this.previousAttributes || {};
+        this.previousAttributes = attributes;
 
         Object.keys(attributes).forEach(key => {
-            // Evaluate attribute value.
             let value = attributes[key];
             // Transform bool attribute values
             if (value === false) {
@@ -340,7 +355,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 +488,11 @@ class Component extends View {
      * });
      */
     partial(strings, ...expressions) {
-        return deepFlat(splitPlaceholders(
-            expandComponents(
-                addPlaceholders(strings, expressions), expressions
-            ), expressions
-        ).map(item => {
-            return renderExpression(item, this);
-        }));
+        return deepFlat(
+            splitPlaceholders(
+                expandComponents(addPlaceholders(strings, expressions), expressions), expressions
+            ).map(item => getExpressionResult(item, this))
+        );
     }
 
     getRecyclePlaceholder() {
@@ -633,7 +652,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.
@@ -715,7 +733,7 @@ class Component extends View {
      *     // Create a navigation component. Add buttons as children. Iterate over items.
      *     const Navigation = Component.create`
      *         <nav>
-     *             ${(self) => self.options.items.map(
+     *             ${self => self.options.items.map(
      *                 item => self.partial`<${Button}>${item.label}</${Button}>`
      *             )}
      *         </nav>
@@ -771,18 +789,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];
@@ -795,9 +813,11 @@ class Component extends View {
             if (close) {
                 const list = inner ? splitPlaceholders(inner, expressions) : [];
                 template = function(addChild) {
-                    return deepFlat(list.map(item => renderExpression(item, this))).map(item => {
+                    return 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('');
@@ -811,7 +831,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/es/View.js

@@ -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;
     }
@@ -312,8 +312,10 @@ class View extends Emitter {
      * 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>
+     * 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() {
@@ -321,6 +323,25 @@ class View extends Emitter {
         // 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/lib/Component.cjs

@@ -5,6 +5,19 @@ 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.
@@ -12,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.
@@ -47,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;
 };
@@ -58,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') {
@@ -78,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;
         }
 
@@ -129,12 +142,12 @@ const expandComponents = (main, expressions) => {
                 const list = splitPlaceholders(expandComponents(inner, expressions), expressions);
                 // Create renderChildren function.
                 renderChildren = function() {
-                    return utils_deepFlat(list.map(item => renderExpression(item, this)));
+                    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.
@@ -328,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) {
@@ -342,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;
             }
         });
 
@@ -469,13 +490,11 @@ class Component extends View {
      * });
      */
     partial(strings, ...expressions) {
-        return utils_deepFlat(splitPlaceholders(
-            expandComponents(
-                addPlaceholders(strings, expressions), expressions
-            ), expressions
-        ).map(item => {
-            return renderExpression(item, this);
-        }));
+        return utils_deepFlat(
+            splitPlaceholders(
+                expandComponents(addPlaceholders(strings, expressions), expressions), expressions
+            ).map(item => getExpressionResult(item, this))
+        );
     }
 
     getRecyclePlaceholder() {
@@ -635,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.
@@ -717,7 +735,7 @@ class Component extends View {
      *     // Create a navigation component. Add buttons as children. Iterate over items.
      *     const Navigation = Component.create`
      *         <nav>
-     *             ${(self) => self.options.items.map(
+     *             ${self => self.options.items.map(
      *                 item => self.partial`<${Button}>${item.label}</${Button}>`
      *             )}
      *         </nav>
@@ -773,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];
@@ -797,9 +815,11 @@ class Component extends View {
             if (close) {
                 const list = inner ? splitPlaceholders(inner, expressions) : [];
                 template = function(addChild) {
-                    return utils_deepFlat(list.map(item => renderExpression(item, this))).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('');
@@ -813,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/View.cjs

@@ -185,15 +185,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;
     }
@@ -314,8 +314,10 @@ class View extends Emitter {
      * 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>
+     * 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() {
@@ -323,6 +325,25 @@ class View extends Emitter {
         // 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rasti",
-    "version": "3.0.0-alpha.1",
+    "version": "3.0.0-alpha.2",
     "description": "Modern MVC for building user interfaces",
     "type": "module",
     "main": "lib/index.cjs",

package/src/Component.js

@@ -2,6 +2,19 @@ import View from './View.js';
 import getResult from './utils/getResult.js';
 import deepFlat  from './utils/deepFlat.js';
 
+/*
+ * 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.
@@ -9,7 +22,7 @@ import deepFlat  from './utils/deepFlat.js';
  * @param {any} context The context to call the expression with.
  * @return {any} The result of the evaluated expression.
  */
-const renderExpression = (expression, context) => getResult(expression, context, context);
+const getExpressionResult = (expression, context) => getResult(expression, context, context);
 
 /*
  * Generate string with placeholders for interpolated expressions.
@@ -44,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(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;
 };
@@ -55,15 +68,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') {
@@ -75,7 +88,7 @@ const expandAttributes = (attributes, renderExpression) => {
             }
         } else {
             // Attribute with value.
-            const value = renderExpression(pair[1]);
+            const value = getExpressionResult(pair[1]);
             out.all[attribute] = value;
         }
 
@@ -126,12 +139,12 @@ const expandComponents = (main, expressions) => {
                 const list = splitPlaceholders(expandComponents(inner, expressions), expressions);
                 // Create renderChildren function.
                 renderChildren = function() {
-                    return deepFlat(list.map(item => renderExpression(item, this)));
+                    return 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.
@@ -325,9 +338,11 @@ export default class Component extends View {
         const attributes = { [Component.DATA_ATTRIBUTE_UID] : this.uid };
 
         if (this.attributes) Object.assign(attributes, getResult(this.attributes, this));
+        // Store previous attributes.
+        const previousAttributes = this.previousAttributes || {};
+        this.previousAttributes = attributes;
 
         Object.keys(attributes).forEach(key => {
-            // Evaluate attribute value.
             let value = attributes[key];
             // Transform bool attribute values
             if (value === false) {
@@ -339,7 +354,13 @@ export default 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;
             }
         });
 
@@ -466,13 +487,11 @@ export default class Component extends View {
      * });
      */
     partial(strings, ...expressions) {
-        return deepFlat(splitPlaceholders(
-            expandComponents(
-                addPlaceholders(strings, expressions), expressions
-            ), expressions
-        ).map(item => {
-            return renderExpression(item, this);
-        }));
+        return deepFlat(
+            splitPlaceholders(
+                expandComponents(addPlaceholders(strings, expressions), expressions), expressions
+            ).map(item => getExpressionResult(item, this))
+        );
     }
 
     getRecyclePlaceholder() {
@@ -632,7 +651,6 @@ export default 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.
@@ -714,7 +732,7 @@ export default class Component extends View {
      *     // Create a navigation component. Add buttons as children. Iterate over items.
      *     const Navigation = Component.create`
      *         <nav>
-     *             ${(self) => self.options.items.map(
+     *             ${self => self.options.items.map(
      *                 item => self.partial`<${Button}>${item.label}</${Button}>`
      *             )}
      *         </nav>
@@ -770,18 +788,18 @@ export default 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];
@@ -794,9 +812,11 @@ export default class Component extends View {
             if (close) {
                 const list = inner ? splitPlaceholders(inner, expressions) : [];
                 template = function(addChild) {
-                    return deepFlat(list.map(item => renderExpression(item, this))).map(item => {
+                    return 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('');
@@ -810,7 +830,7 @@ export default 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/src/View.js

@@ -183,15 +183,15 @@ export default 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;
     }
@@ -312,8 +312,10 @@ export default class View extends Emitter {
      * 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>
+     * 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() {
@@ -321,6 +323,25 @@ export default class View extends Emitter {
         // 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]));
+    }
 }
 
 /*