rasti 4.0.0-alpha.0 → 4.0.0-alpha.2

package/es/Component.js

@@ -34,7 +34,7 @@ const getExpressionResult = (expression, context) => getResult(expression, conte
  * @return {boolean} True if the element is a component root element.
  * @private
  */
-const isComponent = (el) => el.hasAttribute(Component.ATTRIBUTE_ELEMENT) && el.getAttribute(Component.ATTRIBUTE_ELEMENT).endsWith('-1');
+const isComponent = (el) => !!el.dataset[Component.DATASET_ELEMENT] && el.dataset[Component.DATASET_ELEMENT].endsWith('-1');
 
 /**
  * Check if an element has the Rasti data attribute.
@@ -43,7 +43,7 @@ const isComponent = (el) => el.hasAttribute(Component.ATTRIBUTE_ELEMENT) && el.g
  * @return {boolean} True if the element has the data attribute.
  * @private
  */
-const isElement = (el) => el.hasAttribute(Component.ATTRIBUTE_ELEMENT);
+const isElement = (el) => !!el.dataset[Component.DATASET_ELEMENT];
 
 /**
  * Generate string with placeholders for interpolated expressions.
@@ -155,21 +155,39 @@ const expandEvents = (attributes, eventsManager) => {
  * modifies the expressions array adding the mount functions.
  * @param main {string} The main template.
  * @param {Array<any>} expressions Array of expressions.
+ * @param {boolean} skipNormalization Skip placeholder normalization (for recursive calls).
  * @return {string} The template with components tags replaced by expressions
  * placeholders.
  * @private
  */
-const expandComponents = (main, expressions) => {
+const expandComponents = (main, expressions, skipNormalization = false) => {
     const PH = Component.PLACEHOLDER('(\\d+)');
-    // Match component tags.
+    const componentRefMap = new Map();
+    // Normalize component references to use first placeholder index.
+    // Only on first call, not on recursive calls.
+    if (!skipNormalization) {
+        main = main.replace(
+            new RegExp(PH, 'g'),
+            (match, idx) => {
+                const expression = expressions[idx];
+                if (expression && expression.prototype instanceof Component) {
+                    if (componentRefMap.has(expression)) {
+                        return componentRefMap.get(expression);
+                    }
+                    componentRefMap.set(expression, match);
+                }
+                return match;
+            }
+        );
+    }
+    // Match component tags with backreference to ensure correct pairing.
     return main.replace(
-        new RegExp(`<(${PH})([^>]*)>([\\s\\S]*?)</(${PH})>|<(${PH})([^>]*)/>`,'g'),
-        (match, openTag, openIdx, nonVoidAttrs, inner, closeTag, closeIdx, selfClosingTag, selfClosingIdx, selfClosingAttrs) => {
-            let tag, close, attributesStr;
+        new RegExp(`<(${PH})([^>]*)>([\\s\\S]*?)</\\1>|<(${PH})([^>]*)/>`,'g'),
+        (match, openTag, openIdx, nonVoidAttrs, inner, selfClosingTag, selfClosingIdx, selfClosingAttrs) => {
+            let tag, attributesStr, innerList;
 
             if (openTag) {
-                tag = typeof openIdx !== 'undefined' ? expressions[openIdx] : openTag;
-                close = typeof closeIdx !== 'undefined' ? expressions[closeIdx] : closeTag;
+                tag = expressions[openIdx];
                 attributesStr = nonVoidAttrs;
             } else {
                 tag = typeof selfClosingIdx !== 'undefined' ? expressions[selfClosingIdx] : selfClosingTag;
@@ -177,15 +195,11 @@ const expandComponents = (main, expressions) => {
             }
             // No component found.
             if (!(tag.prototype instanceof Component)) return match;
-
-            let innerList;
             // Non void component.
-            if (close) {
-                // Close component tag must match open component tag.
-                if (tag !== close) return match;
+            if (openTag) {
                 // Process inner content same way as partial().
                 // Recursively expand inner components.
-                const innerTemplate = expandComponents(inner, expressions);
+                const innerTemplate = expandComponents(inner, expressions, true);
                 // Parse partial elements to handle dynamic attributes and events.
                 const parsedInner = parsePartialElements(innerTemplate, expressions);
                 // Split into items.
@@ -418,7 +432,7 @@ const parseAttributes = (attributesStr, expressions) => {
 /*
  * These option keys will be extended on the component instance.
  */
-const componentOptions = ['key', 'state', 'onCreate', 'onChange', 'onHydrate', 'onRecycle', 'onUpdate'];
+const componentOptions = ['key', 'state', 'onCreate', 'onChange', 'onHydrate', 'onMount', 'onRecycle', 'onUpdate'];
 
 /**
  * @lends module:Component
@@ -486,34 +500,6 @@ class Component extends View {
         return events;
     }
 
-    /**
-     * Subscribes to a `change` event on a model or emitter object and invokes the `onChange` lifecycle method.
-     * The subscription is automatically cleaned up when the component is destroyed.
-     * By default, the component subscribes to changes on `this.model`, `this.state`, and `this.props`.
-     * 
-     * @param {Object} model - The model or emitter object to listen to.
-     * @param {string} [type='change'] - The event type to listen for.
-     * @param {Function} [listener=this.onChange] - The callback to invoke when the event is emitted.
-     * @returns {Component} The current component instance for chaining.
-     */
-    subscribe(model, type = 'change', listener = this.onChange) {
-        // Check if model has `on` method.
-        if (model.on) this.listenTo(model, type, listener);
-        return this;
-    }
-
-    /**
-     * Tell if `Component` is a container.
-     * In which case, it will not have an element by itself.
-     * It will render a single expression which is expected to return a single component as child.
-     * `this.el` will be a reference to that child component's element.
-     * @return {boolean}
-     * @private
-     */
-    isContainer() {
-        return this.template.elements.length === 0 && this.template.interpolations.length === 1;
-    }
-
     /**
      * Override super method. We don't want to ensure an element on instantiation.
      * We will provide it later.
@@ -537,6 +523,34 @@ class Component extends View {
         }
     }
 
+    /**
+     * Tell if `Component` is a container.
+     * In which case, it will not have an element by itself.
+     * It will render a single expression which is expected to return a single component as child.
+     * `this.el` will be a reference to that child component's element.
+     * @return {boolean}
+     * @private
+     */
+    isContainer() {
+        return this.template.elements.length === 0 && this.template.interpolations.length === 1;
+    }
+
+    /**
+     * Subscribes to a `change` event on a model or emitter object and invokes the `onChange` lifecycle method.
+     * The subscription is automatically cleaned up when the component is destroyed.
+     * By default, the component subscribes to changes on `this.model`, `this.state`, and `this.props`.
+     * 
+     * @param {Object} model - The model or emitter object to listen to.
+     * @param {string} [type='change'] - The event type to listen for.
+     * @param {Function} [listener=this.onChange] - The callback to invoke when the event is emitted.
+     * @returns {Component} The current component instance for chaining.
+     */
+    subscribe(model, type = 'change', listener = this.onChange) {
+        // Check if model has `on` method.
+        if (model.on) this.listenTo(model, type, listener);
+        return this;
+    }
+
     /**
      * Used internally on the render process.
      * Attach the `Component` to the dom element providing `this.el`, delegate events, 
@@ -581,6 +595,25 @@ class Component extends View {
         return this;
     }
 
+    /**
+     * Used internally on the render process.
+     * Reuse a `Component` by replacing the placeholder comment with the real nodes.
+     * Call `onRecycle` lifecycle method.
+     * @param parent {node} The parent node.
+     * @return {Component} The component instance.
+     * @private
+     */
+    recycle(parent) {
+        // Locate the placeholder comment and replace it with the real nodes
+        const toBeReplaced = findComment(parent, Component.MARKER_RECYCLED(this.uid), isComponent);
+        // Replace it with this.el.
+        toBeReplaced.replaceWith(...this.getNodes());
+        // Call `onRecycle` lifecycle method.
+        this.onRecycle.call(this);
+        // Return `this` for chaining.
+        return this;
+    }
+
     /**
      * Get a `comment` marker with same data attribute as this component.
      * Used to replace the component when it is recycled.
@@ -607,65 +640,19 @@ class Component extends View {
     }
 
     /**
-     * Used internally on the render process.
-     * Reuse a `Component` by replacing the placeholder comment with the real nodes.
-     * Call `onRecycle` lifecycle method.
-     * @param parent {node} The parent node.
-     * @return {Component} The component instance.
+     * Call onMount lifecycle method on children and self.
+     * Used internally during the mount and render process.
      * @private
      */
-    recycle(parent) {
-        // Locate the placeholder comment and replace it with the real nodes
-        const toBeReplaced = findComment(parent, Component.MARKER_RECYCLED(this.uid), isComponent);
-        // Replace it with this.el.
-        toBeReplaced.replaceWith(...this.getNodes());
-        // Call `onRecycle` lifecycle method.
-        this.onRecycle.call(this);
+    callOnMount() {
+        // Call onMount on children first.
+        this.children.forEach(child => child.callOnMount());
+        // Call onMount on self.
+        this.onMount.call(this);
         // Return `this` for chaining.
         return this;
     }
 
-    /**
-     * Lifecycle method. Called when the view is created, at the end of the `constructor`.
-     * @param options {object} The view options.
-     */
-    onCreate() {}
-
-    /**
-     * Lifecycle method. Called when model emits `change` event.
-     * By default calls `render` method.
-     * This method can be extended with custom logic.
-     * Maybe comparing new attributes with previous ones and calling
-     * render when needed.
-     * @param model {Rasti.Model} The model that emitted the event.
-     * @param changed {object} Object containing keys and values that has changed.
-     * @param [...args] {any} Any extra arguments passed to set method.
-     */
-    onChange() {
-        this.render();
-    }
-
-    /**
-     * Lifecycle method. Called when the component is rendered for the first time and hydrated.
-     */
-    onHydrate() {}
-
-    /**
-     * Lifecycle method. Called when the component is recycled (reused with the same key) and added to the DOM again.
-     */
-    onRecycle() {}
-
-    /**
-     * Lifecycle method. Called when the component is updated or re-rendered.
-     */
-    onUpdate() {}
-
-    /**
-     * Lifecycle method. Called when the component is destroyed.
-     * @param {object} options Options object or any arguments passed to `destroy` method.
-     */
-    onDestroy() {}
-
     /**
      * Tagged template helper method.
      * Used to create a partial template.  
@@ -791,6 +778,7 @@ class Component extends View {
      *   - Components with a `key` are recycled if a previous child with the same key exists.
      *   - Unkeyed components are recycled if they have the same type and position in the template or partial.
      *   A recycled `Component` will call the `onRecycle` lifecycle method.  
+     * - All child components will have their `onMount` lifecycle method called after they are added to the DOM. New children will be hydrated first (calling their `onHydrate` lifecycle method).
      * - If the active element is inside the component, it will retain focus after the render.  
      * @return {Component} The component instance.
      */
@@ -860,12 +848,12 @@ class Component extends View {
                 discarded.destroy();
             });
             // Add new children. Hydrate them.
-            nextChildren.forEach(child => {
-                this.addChild(child).hydrate(fragment);
-            });
+            nextChildren.forEach(child => this.addChild(child).hydrate(fragment));
 
             interpolation.update(fragment);
         });
+        // Call onMount lifecycle method on all children after interpolations update.
+        this.children.forEach(child => child.callOnMount());
         // Destroy unused children.
         previousChildren.forEach(prev => {
             if (this.children.indexOf(prev) < 0) prev.destroy();
@@ -889,6 +877,55 @@ class Component extends View {
         return this;
     }
 
+    /**
+     * Lifecycle method. Called when the view is created, at the end of the `constructor`.
+     * @param options {object} The view options.
+     */
+    onCreate() {}
+
+    /**
+     * Lifecycle method. Called when model emits `change` event.
+     * By default calls `render` method.
+     * This method can be extended with custom logic.
+     * Maybe comparing new attributes with previous ones and calling
+     * render when needed.
+     * @param model {Rasti.Model} The model that emitted the event.
+     * @param changed {object} Object containing keys and values that has changed.
+     * @param [...args] {any} Any extra arguments passed to set method.
+     */
+    onChange() {
+        this.render();
+    }
+
+    /**
+     * Lifecycle method. Called when the component is rendered for the first time and hydrated.
+     */
+    onHydrate() {}
+
+    /**
+     * Lifecycle method. Called when the component is mounted to the DOM.
+     * This method is called after `onHydrate` and only when the component's element is actually present in the document.
+     * It is called during the initial mount process (when using `Component.mount()`) and when new child components are added during render.
+     * Use this method to perform operations that require the element to be in the DOM, such as measuring dimensions or focusing elements.
+     */
+    onMount() {}
+
+    /**
+     * Lifecycle method. Called when the component is recycled (reused with the same key) and added to the DOM again.
+     */
+    onRecycle() {}
+
+    /**
+     * Lifecycle method. Called when the component is updated or re-rendered.
+     */
+    onUpdate() {}
+
+    /**
+     * Lifecycle method. Called when the component is destroyed.
+     * @param {object} options Options object or any arguments passed to `destroy` method.
+     */
+    onDestroy() {}
+
     /**
      * Mark a string as safe HTML to be rendered.  
      * Normally you don't need to use this method, as Rasti will automatically mark string literals 
@@ -925,6 +962,7 @@ class Component extends View {
      * Mount the component into the dom.
      * It instantiate the Component view using options, 
      * appends its element into the DOM (if `el` is provided).
+     * The `onMount` lifecycle method will be called after the component is added to the DOM.
      * And returns the view instance.
      * @static
      * @param {object} [options] The view options.
@@ -946,6 +984,8 @@ class Component extends View {
                 // Append element to the DOM.
                 el.append(...component.render().getNodes());
             }
+            // Call onMount lifecycle method after nodes are in the DOM.
+            component.callOnMount();
         }
         // Return component instance.
         return component;
@@ -1126,6 +1166,11 @@ class Component extends View {
 Component.ATTRIBUTE_ELEMENT = 'data-rasti-el';
 Component.ATTRIBUTE_EVENT = (type) => `data-rasti-on-${type}`;
 
+/*
+ * Dataset attribute used to identify elements.
+ */
+Component.DATASET_ELEMENT = 'rastiEl';
+
 /*
  * Placeholders used to temporarily replace expressions in the template.
  */

package/es/utils/getAttributesDiff.js

@@ -12,12 +12,14 @@ function getAttributesDiff(attributes, previous = {}) {
     // Find attributes to add/update.
     Object.keys(attributes).forEach(key => {
         let value = attributes[key];
-        
-        if (value === true) {
-            add[key] = '';
-        } else if (value !== false) {
-            if (value === null || typeof value === 'undefined') value = '';
-            add[key] = value;
+        // Only add if the value is different from previous.
+        if (value !== previous[key]) {
+            if (value === true) {
+                add[key] = '';
+            } else if (value !== false) {
+                if (value === null || typeof value === 'undefined') value = '';
+                add[key] = value;
+            }
         }
     });
     // Find attributes to remove.