rasti 4.0.0-alpha.8 → 4.0.0-alpha.9

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.8/docs/logo-dark.svg">
-        <img alt="Rasti.js" src="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0-alpha.8/docs/logo.svg" height="120">
+        <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0-alpha.9/docs/logo-dark.svg">
+        <img alt="Rasti.js" src="https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0-alpha.9/docs/logo.svg" height="120">
     </picture>
 </p>
 

package/dist/rasti.js

@@ -845,7 +845,7 @@
          * Destroy the view.
          * Destroy children views if any, undelegate events, stop listening to events, call `onDestroy` lifecycle method.
          * @param {object} options Options object or any arguments passed to `destroy` method will be passed to `onDestroy` method.
-         * @return {Rasti.View} Return `this` for chaining.
+         * @return {View} Return `this` for chaining.
          */
         destroy() {
             // Call destroy on children.
@@ -878,8 +878,8 @@
          * Add a view as a child.
          * Children views are stored at `this.children`, and destroyed when the parent is destroyed.
          * Returns the child for chaining.
-         * @param {Rasti.View} child
-         * @return {Rasti.View}
+         * @param {View} child
+         * @return {View}
          */
         addChild(child) {
             this.children.push(child);
@@ -944,7 +944,7 @@
 
         /**
          * Remove `this.el` from the DOM.
-         * @return {Rasti.View} Return `this` for chaining.
+         * @return {View} Return `this` for chaining.
          */
         removeElement() {
             this.el.parentNode.removeChild(this.el);
@@ -976,7 +976,7 @@
          * invoked **once for each matched element** (from inner to outer).
          *
          * @param {object} [events] Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to the root element.
-         * @return {Rasti.View} Returns `this` for chaining.
+         * @return {View} Returns `this` for chaining.
          * @example
          * // Using prototype (recommended for static events)
          * class Modal extends View {
@@ -1063,7 +1063,7 @@
          * Removes all of the view's delegated events. 
          * Useful if you want to disable or remove a view from the DOM temporarily. 
          * Called automatically when the view is destroyed and when `delegateEvents` is called again.
-         * @return {Rasti.View} Return `this` for chaining.
+         * @return {View} Return `this` for chaining.
          */
         undelegateEvents() {
             this.delegatedEventListeners.forEach(({ type, listener }) => {
@@ -1088,7 +1088,7 @@
          * 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.
+         * @return {View} Returns `this` for chaining.
          */
         render() {
             if (this.template) this.el.innerHTML = this.template(this.model);
@@ -1114,6 +1114,17 @@
                 '\'' : '&#039;'
             }[match]));
         }
+
+        /**
+         * Reset the unique ID counter to 0.
+         * This is useful for server-side rendering scenarios where you want to ensure that
+         * the generated unique IDs match those on the client, enabling seamless hydration of components.
+         * This method is inherited by {@link #module_component Component}.
+         * @static
+         */
+        static resetUid() {
+            View.uid = 0;
+        }
     }
 
     /**
@@ -2779,7 +2790,7 @@
          * 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 model {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.
          */
@@ -3091,25 +3102,25 @@
     /*
      * Attributes used to identify elements and events.
      */
-    Component.ATTRIBUTE_ELEMENT = 'data-rasti-el';
-    Component.ATTRIBUTE_EVENT = (type, uid) => `data-rasti-on-${type}-${uid}`;
+    Component.ATTRIBUTE_ELEMENT = 'data-rst-el';
+    Component.ATTRIBUTE_EVENT = (type, uid) => `data-rst-on-${type}-${uid}`;
 
     /*
      * Dataset attribute used to identify elements.
      */
-    Component.DATASET_ELEMENT = 'rastiEl';
+    Component.DATASET_ELEMENT = 'rstEl';
 
     /*
      * Placeholders used to temporarily replace expressions in the template.
      */
-    Component.PLACEHOLDER = (idx) => `__RASTI_PH_${idx}__`;
+    Component.PLACEHOLDER = (idx) => `__RASTI_PLACEHOLDER_${idx}__`;
 
     /*
      * Markers used to identify interpolation and recycled components.
      */
-    Component.MARKER_RECYCLED = (uid) => `rasti-r-${uid}`;
-    Component.MARKER_START = (uid) => `rasti-s-${uid}`;
-    Component.MARKER_END = (uid) => `rasti-e-${uid}`;
+    Component.MARKER_RECYCLED = (uid) => `rst-r-${uid}`;
+    Component.MARKER_START = (uid) => `rst-s-${uid}`;
+    Component.MARKER_END = (uid) => `rst-e-${uid}`;
 
     /**
      * Components are a special kind of `View` that is designed to be easily composable, 
@@ -3121,9 +3132,9 @@
      * @extends View
      * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onHydrate, onRecycle, onUpdate, onCreate, onChange. Any additional options not in the component or view options list will be automatically extracted as props and stored as `this.props`.
      * @property {string} [key] A unique key to identify the component. Components with keys are recycled when the same key is found in the previous render. Unkeyed components are recycled based on type and position.
-     * @property {Rasti.Model} [model] A `Rasti.Model` or any emitter object containing data and business logic. The component will listen to `change` events and call `onChange` lifecycle method.
-     * @property {Rasti.Model} [state] A `Rasti.Model` or any emitter object containing data and business logic, to be used as internal state. The component will listen to `change` events and call `onChange` lifecycle method.
-     * @property {Rasti.Model} [props] Automatically created from any options not merged to the component instance. Contains props passed from parent component as a `Rasti.Model`. The component will listen to `change` events on props and call `onChange` lifecycle method. When a component with a `key` is recycled during parent re-render, new props are automatically updated and any changes trigger a re-render.
+     * @property {Model} [model] A `Model` or any emitter object containing data and business logic. The component will listen to `change` events and call `onChange` lifecycle method.
+     * @property {Model} [state] A `Model` or any emitter object containing data and business logic, to be used as internal state. The component will listen to `change` events and call `onChange` lifecycle method.
+     * @property {Model} [props] Automatically created from any options not merged to the component instance. Contains props passed from parent component as a `Model`. The component will listen to `change` events on props and call `onChange` lifecycle method. When a component with a `key` is recycled during parent re-render, new props are automatically updated and any changes trigger a re-render.
      * @see {@link #module_component_create Component.create}
      * @example
      * import { Component, Model } from 'rasti';
@@ -3134,7 +3145,7 @@
      *     </div>
      * `;
      * // Create model to store seconds.
-     * const model = new Model({ seconds: 0 });
+     * const model = new Model({ seconds : 0 });
      * // Mount timer on body.
      * Timer.mount({ model }, document.body);
      * // Increment `model.seconds` every second.