ziko 0.48.2 → 0.49.0

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Nov 21 2025 22:08:16 GMT+0100 (UTC+01:00)
+  Date : Sat Nov 22 2025 13:34:29 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1340,7 +1340,7 @@ class UIElementCore extends UINode{
 //     //   UI.append(...items);
 //     // }
 //     // else UI.element=this.element.cloneNode(true);
-//     // return UI.render(render);
+//     // return UI.mount(render);
 //   }
 
 //   freeze(freeze){
@@ -1350,9 +1350,9 @@ class UIElementCore extends UINode{
   // setTarget(tg) {
   //   if(this.isBody) return ;
   //   if (tg?.isUIElement) tg = tg.element;
-  //   this.unrender();
+  //   this.unmount();
   //   this.target = tg;
-  //   this.render();
+  //   this.mount();
   //   return this;
   // }
 //   describe(label){
@@ -1658,18 +1658,18 @@ function remove(...ele) {
   return this;
 }
 function clear(){
-  this?.items?.forEach(n=>n.unrender());
+  this?.items?.forEach(n=>n.unmount());
   this.element.innerHTML = "";
   return this;
 }
-function render(target = this.target) {
+function mount(target = this.target) {
   if(this.isBody)return ;
   if(target?.isUIElement)target=target.element;
   this.target=target;
   this.target?.appendChild(this.element);
   return this;
 }
-function unrender(){
+function unmount(){
   if(this.cache.parent)this.cache.parent.remove(this);
   else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
   return this;
@@ -1682,11 +1682,11 @@ function replaceElementWith(new_element){
     return this
 }
 function renderAfter(t = 1) {
-  setTimeout(() => this.render(), t);
+  setTimeout(() => this.mount(), t);
   return this;
 }
 function unrenderAfter(t = 1) {
-  setTimeout(() => this.unrender(), t);
+  setTimeout(() => this.unmount(), t);
   return this;
 }
 function after(ui){
@@ -1707,12 +1707,12 @@ var DomMethods = /*#__PURE__*/Object.freeze({
     before: before,
     clear: clear,
     insertAt: insertAt,
+    mount: mount,
     prepend: prepend,
     remove: remove,
-    render: render,
     renderAfter: renderAfter,
     replaceElementWith: replaceElementWith,
-    unrender: unrender,
+    unmount: unmount,
     unrenderAfter: unrenderAfter
 });
 
@@ -2417,7 +2417,7 @@ let UIElement$1 = class UIElement extends UIElementCore{
   //   //   UI.append(...items);
   //   // }
   //   // else UI.element=this.element.cloneNode(true);
-  //   // return UI.render(render);
+  //   // return UI.mount(render);
   // }
   // [Symbol.iterator]() {
   //   return this.items[Symbol.iterator]();
@@ -2439,9 +2439,9 @@ let UIElement$1 = class UIElement extends UIElementCore{
   // setTarget(tg) {
   //   if(this.isBody) return ;
   //   if (tg?.isUIElement) tg = tg.element;
-  //   this.unrender();
+  //   this.unmount();
   //   this.target = tg;
-  //   this.render();
+  //   this.mount();
   //   return this;
   // }
   // describe(label){
@@ -2704,7 +2704,7 @@ class ZikoUIFlex extends UIElement$1 {
     if (typeof h == "number") h += "%";
     this.style({ width: w, height: h });
     this.style({ display: "flex" });
-    // this.render();
+    // this.mount();
   }
   get isFlex(){
     return true;
@@ -2812,7 +2812,7 @@ class ZikoUISuspense extends UIElement{
         (async ()=>{
             try{
                 const ui = await callback();
-                fallback_ui.unrender();
+                fallback_ui.unmount();
                 this.append(ui);
                 // console.log(content)
             }
@@ -2914,19 +2914,19 @@ function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
             }
 
             connectedCallback() {
-                this.render();
+                this.mount();
             }
 
-            render() {
+            mount() {
                 this.shadowRoot.innerHTML = '';
-                this.UIElement = UIElement(this.props).render(this.shadowRoot);
+                this.UIElement = UIElement(this.props).mount(this.shadowRoot);
             }
 
             attributeChangedCallback(name, _, newValue) {
                 Object.assign(this.props, {
                     [name]: this.mask[name].type(newValue)
                 });
-                this.render();
+                this.mount();
             }
         }
     );
@@ -2940,7 +2940,7 @@ class UISwitch extends UIElement$1{
         this.init();
     }
     init(){
-        Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unrender());
+        Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unmount());
         super.init(this.current.element);
     }
     get current(){
@@ -2967,7 +2967,7 @@ const Switch=({key, cases})=> new UISwitch(key, cases);
 const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
 const svg2ascii=svg=>btoa(svg2str(svg));
 const svg2imgUrl=svg=>'data:image/svg+xml;base64,'+svg2ascii(svg);
-const svg2img=(svg,render=true)=>tags.img(svg2imgUrl(svg)).render(render);
+const svg2img=(svg,render=true)=>tags.img(svg2imgUrl(svg)).mount(render);
 
 // const obj2str=(object)=>{
 //     const recursiveToString = (obj) => {
@@ -4857,7 +4857,7 @@ class ZikoApp {
         this.head && this.setHead(this.head);
         this.wrapper && this.setWrapper(this.wrapper);
         this.target && this.setTarget(this.target);
-        if(this.wrapper && this.target)this.wrapper.render(this.target);
+        if(this.wrapper && this.target)this.wrapper.mount(this.target);
     }
     setTarget(target){
         if(target instanceof HTMLElement) this.target = target;
@@ -4933,16 +4933,16 @@ class ZikoSPA extends ZikoApp{
             ...Object.entries(routes)
         ]);
         this.clear();
-        globalThis.onpopstate = this.render(location.pathname);
+        globalThis.onpopstate = this.mount(location.pathname);
     }
     clear(){
         [...this.routes].forEach(n=>{
-            !isDynamic(n[0]) && n[1]?.isUIElement && n[1].unrender();
+            !isDynamic(n[0]) && n[1]?.isUIElement && n[1].unmount();
         });   
         // this.wrapper.clear();
         return this;
     }
-    render(path){
+    mount(path){
         const [mask, callback] = [...this.routes].find(route=>routesMatcher(route[0],path));
         let element ;
         if(isDynamic(mask)){
@@ -4950,13 +4950,13 @@ class ZikoSPA extends ZikoApp{
             element = callback.call(this,params);
         }
         else {
-            callback?.isUIElement && callback.render(this.wrapper); 
+            callback?.isUIElement && callback.mount(this.wrapper); 
             if(typeof callback === "function") element = callback();  
         }
-        if(element?.isUIElement) element.render(this.wrapper);
-        // if(element?.isZikoApp) element.render(this.wrapper);
+        if(element?.isUIElement) element.mount(this.wrapper);
+        // if(element?.isZikoApp) element.mount(this.wrapper);
         if(element instanceof Promise){
-            element.then(e=>e.render(this.wrapper));
+            element.then(e=>e.mount(this.wrapper));
         }
         globalThis.history.pushState({}, "", path);
         return this;

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Nov 21 2025 22:08:16 GMT+0100 (UTC+01:00)
+  Date : Sat Nov 22 2025 13:34:29 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1344,7 +1344,7 @@
     //     //   UI.append(...items);
     //     // }
     //     // else UI.element=this.element.cloneNode(true);
-    //     // return UI.render(render);
+    //     // return UI.mount(render);
     //   }
 
     //   freeze(freeze){
@@ -1354,9 +1354,9 @@
       // setTarget(tg) {
       //   if(this.isBody) return ;
       //   if (tg?.isUIElement) tg = tg.element;
-      //   this.unrender();
+      //   this.unmount();
       //   this.target = tg;
-      //   this.render();
+      //   this.mount();
       //   return this;
       // }
     //   describe(label){
@@ -1662,18 +1662,18 @@
       return this;
     }
     function clear(){
-      this?.items?.forEach(n=>n.unrender());
+      this?.items?.forEach(n=>n.unmount());
       this.element.innerHTML = "";
       return this;
     }
-    function render(target = this.target) {
+    function mount(target = this.target) {
       if(this.isBody)return ;
       if(target?.isUIElement)target=target.element;
       this.target=target;
       this.target?.appendChild(this.element);
       return this;
     }
-    function unrender(){
+    function unmount(){
       if(this.cache.parent)this.cache.parent.remove(this);
       else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
       return this;
@@ -1686,11 +1686,11 @@
         return this
     }
     function renderAfter(t = 1) {
-      setTimeout(() => this.render(), t);
+      setTimeout(() => this.mount(), t);
       return this;
     }
     function unrenderAfter(t = 1) {
-      setTimeout(() => this.unrender(), t);
+      setTimeout(() => this.unmount(), t);
       return this;
     }
     function after(ui){
@@ -1711,12 +1711,12 @@
         before: before,
         clear: clear,
         insertAt: insertAt,
+        mount: mount,
         prepend: prepend,
         remove: remove,
-        render: render,
         renderAfter: renderAfter,
         replaceElementWith: replaceElementWith,
-        unrender: unrender,
+        unmount: unmount,
         unrenderAfter: unrenderAfter
     });
 
@@ -2421,7 +2421,7 @@
       //   //   UI.append(...items);
       //   // }
       //   // else UI.element=this.element.cloneNode(true);
-      //   // return UI.render(render);
+      //   // return UI.mount(render);
       // }
       // [Symbol.iterator]() {
       //   return this.items[Symbol.iterator]();
@@ -2443,9 +2443,9 @@
       // setTarget(tg) {
       //   if(this.isBody) return ;
       //   if (tg?.isUIElement) tg = tg.element;
-      //   this.unrender();
+      //   this.unmount();
       //   this.target = tg;
-      //   this.render();
+      //   this.mount();
       //   return this;
       // }
       // describe(label){
@@ -2708,7 +2708,7 @@
         if (typeof h == "number") h += "%";
         this.style({ width: w, height: h });
         this.style({ display: "flex" });
-        // this.render();
+        // this.mount();
       }
       get isFlex(){
         return true;
@@ -2816,7 +2816,7 @@
             (async ()=>{
                 try{
                     const ui = await callback();
-                    fallback_ui.unrender();
+                    fallback_ui.unmount();
                     this.append(ui);
                     // console.log(content)
                 }
@@ -2918,19 +2918,19 @@
                 }
 
                 connectedCallback() {
-                    this.render();
+                    this.mount();
                 }
 
-                render() {
+                mount() {
                     this.shadowRoot.innerHTML = '';
-                    this.UIElement = UIElement(this.props).render(this.shadowRoot);
+                    this.UIElement = UIElement(this.props).mount(this.shadowRoot);
                 }
 
                 attributeChangedCallback(name, _, newValue) {
                     Object.assign(this.props, {
                         [name]: this.mask[name].type(newValue)
                     });
-                    this.render();
+                    this.mount();
                 }
             }
         );
@@ -2944,7 +2944,7 @@
             this.init();
         }
         init(){
-            Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unrender());
+            Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unmount());
             super.init(this.current.element);
         }
         get current(){
@@ -2971,7 +2971,7 @@
     const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
     const svg2ascii=svg=>btoa(svg2str(svg));
     const svg2imgUrl=svg=>'data:image/svg+xml;base64,'+svg2ascii(svg);
-    const svg2img=(svg,render=true)=>tags.img(svg2imgUrl(svg)).render(render);
+    const svg2img=(svg,render=true)=>tags.img(svg2imgUrl(svg)).mount(render);
 
     // const obj2str=(object)=>{
     //     const recursiveToString = (obj) => {
@@ -4861,7 +4861,7 @@
             this.head && this.setHead(this.head);
             this.wrapper && this.setWrapper(this.wrapper);
             this.target && this.setTarget(this.target);
-            if(this.wrapper && this.target)this.wrapper.render(this.target);
+            if(this.wrapper && this.target)this.wrapper.mount(this.target);
         }
         setTarget(target){
             if(target instanceof HTMLElement) this.target = target;
@@ -4937,16 +4937,16 @@
                 ...Object.entries(routes)
             ]);
             this.clear();
-            globalThis.onpopstate = this.render(location.pathname);
+            globalThis.onpopstate = this.mount(location.pathname);
         }
         clear(){
             [...this.routes].forEach(n=>{
-                !isDynamic(n[0]) && n[1]?.isUIElement && n[1].unrender();
+                !isDynamic(n[0]) && n[1]?.isUIElement && n[1].unmount();
             });   
             // this.wrapper.clear();
             return this;
         }
-        render(path){
+        mount(path){
             const [mask, callback] = [...this.routes].find(route=>routesMatcher(route[0],path));
             let element ;
             if(isDynamic(mask)){
@@ -4954,13 +4954,13 @@
                 element = callback.call(this,params);
             }
             else {
-                callback?.isUIElement && callback.render(this.wrapper); 
+                callback?.isUIElement && callback.mount(this.wrapper); 
                 if(typeof callback === "function") element = callback();  
             }
-            if(element?.isUIElement) element.render(this.wrapper);
-            // if(element?.isZikoApp) element.render(this.wrapper);
+            if(element?.isUIElement) element.mount(this.wrapper);
+            // if(element?.isZikoApp) element.mount(this.wrapper);
             if(element instanceof Promise){
-                element.then(e=>e.render(this.wrapper));
+                element.then(e=>e.mount(this.wrapper));
             }
             globalThis.history.pushState({}, "", path);
             return this;