ziko 0.48.2 → 0.49.1

package/dist/ziko.mjs

@@ -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
@@ -1338,7 +1338,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){
@@ -1348,9 +1348,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){
@@ -1656,18 +1656,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;
@@ -1680,11 +1680,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){
@@ -1705,12 +1705,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
 });
 
@@ -2415,7 +2415,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]();
@@ -2437,9 +2437,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){
@@ -2702,7 +2702,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;
@@ -2810,7 +2810,7 @@ class ZikoUISuspense extends UIElement{
         (async ()=>{
             try{
                 const ui = await callback();
-                fallback_ui.unrender();
+                fallback_ui.unmount();
                 this.append(ui);
                 // console.log(content)
             }
@@ -2912,19 +2912,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();
             }
         }
     );
@@ -2938,7 +2938,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(){
@@ -2965,7 +2965,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) => {
@@ -4855,7 +4855,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;
@@ -4931,16 +4931,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)){
@@ -4948,13 +4948,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.48.2",
+  "version": "0.49.1",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",

package/src/app/spa.js

@@ -9,16 +9,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)){
@@ -26,13 +26,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/src/app/ziko-app.js

@@ -13,7 +13,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;

package/src/data/converter/svg.js

@@ -2,7 +2,7 @@ import { tags } from "../../ui"
 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);
 export{
     svg2str,
     svg2ascii,

package/src/ui/__methods__/dom.js

@@ -31,18 +31,18 @@ export function remove(...ele) {
   return this;
 }
 export function clear(){
-  this?.items?.forEach(n=>n.unrender());
+  this?.items?.forEach(n=>n.unmount());
   this.element.innerHTML = "";
   return this;
 }
-export function render(target = this.target) {
+export 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;
 }
-export function unrender(){
+export 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;
@@ -55,11 +55,11 @@ export function replaceElementWith(new_element){
     return this
 }
 export function renderAfter(t = 1) {
-  setTimeout(() => this.render(), t);
+  setTimeout(() => this.mount(), t);
   return this;
 }
 export function unrenderAfter(t = 1) {
-  setTimeout(() => this.unrender(), t);
+  setTimeout(() => this.unmount(), t);
   return this;
 }
 export function after(ui){

package/src/ui/constructors/UIElement.js

@@ -94,7 +94,7 @@ 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]();
@@ -116,9 +116,9 @@ 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){

package/src/ui/constructors/UIElementCore.js

@@ -133,7 +133,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){
@@ -143,9 +143,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){

package/src/ui/constructors/_m.js.txt

@@ -46,22 +46,22 @@ get #SwitchedStyleRTL_LTR(){
     return this;
   }
   filterByTextContent(text, exactMatch = false) {
-    this.items.forEach((n) => n.render());
+    this.items.forEach((n) => n.mount());
     this.filter(
       (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
-      (e) => e.unrender(),
+      (e) => e.unmount(),
     );
     // this.items.filter(n=>{
     //   const content=n.element.textContent;
     //   return !(exactMatch?content===text:content.includes(text))
-    // }).map(n=>n.unrender());
+    // }).map(n=>n.unmount());
     //  return this;
   }
   filterByClass(value) {
-    this.items.map((n) => n.render());
+    this.items.map((n) => n.mount());
     this.items
       .filter((n) => !n.classes.includes(value))
-      .map((n) => n.unrender());
+      .map((n) => n.unmount());
     return this;
   }
   sortByTextContent(value, displays) {

package/src/ui/flex/index.js

@@ -7,7 +7,7 @@ class ZikoUIFlex extends UIElement {
     if (typeof h == "number") h += "%";
     this.style({ width: w, height: h });
     this.style({ display: "flex" });
-    // this.render();
+    // this.mount();
   }
   get isFlex(){
     return true;

package/src/ui/grid/index.js

@@ -7,7 +7,7 @@ class ZikoUIGrid extends UIElement {
       if (typeof h == "number") h += "%";
       this.style({ border: "1px solid black", width: w, height: h });
       this.style({ display: "grid" });
-    //   this.render();
+    //   this.mount();
     }
     get isGird(){
         return true;

package/src/ui/logic/switch/index.js

@@ -8,7 +8,7 @@ class UISwitch extends UIElement{
         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(){

package/src/ui/suspense/index.js

@@ -10,7 +10,7 @@ class ZikoUISuspense extends UIElement{
         (async ()=>{
             try{
                 const ui = await callback()
-                fallback_ui.unrender()
+                fallback_ui.unmount()
                 this.append(ui)
                 // console.log(content)
             }

package/src/ui/web-component/index.js

@@ -1,7 +1,7 @@
 export function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
     if (globalThis.customElements?.get(name)) {
         console.warn(`Custom element "${name}" is already defined`);
-        return; // skip redefinition
+        return;
     }
     if(name.search('-') === -1){
         console.warn(`"${name}" is not a valid custom element name`);
@@ -30,7 +30,9 @@ export function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
 
             render() {
                 this.shadowRoot.innerHTML = '';
-                this.UIElement = UIElement(this.props).render(this.shadowRoot);
+                const item = UIElement(this.props);
+                if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot)) 
+                else item.mount(this.shadowRoot)
             }
 
             attributeChangedCallback(name, _, newValue) {