rasti 4.0.0-alpha.10 → 4.0.0-alpha.12

package/README.md

@@ -1,7 +1,7 @@
 <p align="center">
     <picture>
-        <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0-alpha.10/docs/logo-dark.svg">
-        <img alt="Rasti.js" src="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0-alpha.10/docs/logo.svg" height="120">
+        <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0-alpha.12/docs/logo-dark.svg">
+        <img alt="Rasti.js" src="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0-alpha.12/docs/logo.svg" height="120">
     </picture>
 </p>
 

package/dist/rasti.js

@@ -78,6 +78,7 @@
      * - UMD dev: replaced with true
      * - UMD prod: replaced with false
      * @type {boolean}
+     * @module
      * @private
      */
     const __DEV__ = true;
@@ -793,7 +794,14 @@
      *     }
      *
      *     template(model) {
-     *         return `Seconds: <span>${model.seconds}</span>`;
+     *         return `Seconds: <span>${View.sanitize(model.seconds)}</span>`;
+     *     }
+     *
+     *     render() {
+     *         if (this.template) {
+     *             this.el.innerHTML = this.template(this.model);
+     *         }
+     *         return this;
      *     }
      * }
      * // Render view and append view's element into the body.
@@ -1087,23 +1095,29 @@
         }
 
         /**
-         * Renders the view.  
-         * This method should be overridden with custom logic.
-         * The only convention is to manipulate the DOM within the scope of `this.el`,
-         * and to return `this` for chaining.  
-         * If you add any child views, you should call `this.destroyChildren` before re-rendering.  
-         * The default implementation updates `this.el`'s innerHTML with the result
-         * of calling `this.template`, passing `this.model` as the argument.
-         * <br><br> &#9888; **Security Notice:** The default implementation utilizes `innerHTML`, which may introduce Cross-Site Scripting (XSS) risks.  
-         * Ensure that any user-generated content is properly sanitized before inserting it into the DOM. 
-         * You can use the {@link #module_view_sanitize View.sanitize} static method to escape HTML entities in a string.  
-         * For best practices on secure data handling, refer to the 
-         * [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html).<br><br>
+         * `render` is the core function that your view should override, in order to populate its element (`this.el`), with the appropriate HTML. The convention is for `render` to always return `this`.  
+         * Views are low-level building blocks for creating user interfaces. For most use cases, we recommend using {@link #module_component Component} instead, which provides a more declarative template syntax, automatic DOM updates, and a more efficient render pipeline.  
+         * If you add any child views, you should call `this.destroyChildren` before re-rendering.
+         * 
          * @return {View} Returns `this` for chaining.
+         * @example
+         * class UserView extends View {
+         *     render() {
+         *         if (this.template) {
+         *             const model = this.model;
+         *             // Sanitize model attributes to prevent XSS attacks.
+         *             const safeData = {
+         *                 name : View.sanitize(model.name),
+         *                 email : View.sanitize(model.email),
+         *                 bio : View.sanitize(model.bio)
+         *             };
+         *             this.el.innerHTML = this.template(safeData);
+         *         }
+         *         return this;
+         *     }
+         * }
          */
         render() {
-            if (this.template) this.el.innerHTML = this.template(this.model);
-            // Return `this` for chaining.
             return this;
         }
 
@@ -1936,7 +1950,9 @@
      * @return {boolean} True if the element contains a component.
      * @private
      */
-    const containsElement = (el) => !!(el && el.dataset && el.dataset[Component.DATASET_ELEMENT]) || !!el.querySelector(`[${Component.ATTRIBUTE_ELEMENT}]`);
+    const containsElement = (el) => !!(
+        el && ((el.dataset && el.dataset[Component.DATASET_ELEMENT]) || (el.querySelector && el.querySelector(`[${Component.ATTRIBUTE_ELEMENT}]`)))
+    );
 
     /**
      * Generate string with placeholders for interpolated expressions.