ziko 0.42.0 → 0.43.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Aug 24 2025 12:13:24 GMT+0100 (UTC+01:00)
+  Date : Sun Aug 24 2025 12:52:45 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
@@ -1150,28 +1150,34 @@
         });
     }
 
-    const __UI__={
-        __all__(){
-            return Object.values(this)
-              .filter(Array.isArray)
-              .flat();
-        },
-        querySelectorAll(){
-            return this.__all__().filter(n=>n)
-        },
-        getElementByIndex(index){
-            return this.__all__().find(n=>n.ui_index===index);
-        },
-        getElementById(id){
-            return null;
-        },
-        getElementsByClass(){
-
-        },
-        getElementsByTagName(){
-            
+    class UIStore extends Array {
+        constructor(...args) {
+            super(...args); 
         }
-    };
+        getItemById(id) {
+            return this.find(n => n.element.id === id);
+        }
+        getItemsByTagName(tag) {
+            return this.filter(n => n.element.tagName.toLowerCase() === tag.toLowerCase());
+        }
+        getElementsByClassName(className) {
+            return this.filter(n => n.element.classList?.contains(className));
+        }
+        querySelector(selector) {
+            const el = globalThis?.document?.querySelector(selector);
+            if (!el) return null;
+            return this.find(ui => ui.element === el) || null;
+        }
+        querySelectorAll(selector) {
+            const els = globalThis?.document?.querySelectorAll(selector);
+            return Array.from(els)
+                .map(el => this.find(ui => ui.element === el))
+                .filter(Boolean);
+        }
+    }
+
+    // create the singleton
+    const __UI__ = new UIStore();
 
     const __Config__ = {
         default:{
@@ -1194,10 +1200,10 @@
     };
 
     const __HYDRATION__ = {
-        map : new Map(),
+        store : new Map(),
         index : 0,
-        increment : function(){
-            return this.index ++
+        register: function(component){
+            this.store.set(this.index++, component);
         }
     };
 
@@ -1205,6 +1211,9 @@
         ui_index : 0,
         get_ui_index:function(){
             return this.ui_index ++
+        },
+        register_ui: function(UIElement){
+            
         }
     };
 
@@ -1227,7 +1236,6 @@
                         __UI__,
                         __HYDRATION__,
                         __State__,
-                        // __HYDRATION_MAP__,
                         __Config__,
                         __CACHE__,
                     };
@@ -2875,7 +2883,7 @@
 
     __init__global__();
     class UIElement extends UINode{
-      constructor({element, name ='', type="html", useDefaultStyle=false}={}){
+      constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render, useDefaultStyle=false}={}){
         super();
         this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
         if(typeof element === "string") {
@@ -2926,8 +2934,8 @@
           resize:null,
           intersection:null
         };
-        if(element)Object.assign(this.cache,{element});
-        this.uuid = `${this.cache.name}-${Random.string(16)}`;
+        if(element) Object.assign(this.cache,{element});
+        // this.uuid = `${this.cache.name}-${Random.string(16)}`
         this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
         useDefaultStyle && this.style({ 
           position: "relative",
@@ -2937,9 +2945,9 @@
           width : "auto",
           height : "auto"
          });
-        this.items = [];
+        this.items = new UIStore();
         globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-        element && globalThis.__Ziko__.__Config__.default.render && this?.render?.();
+        element && render && this?.render?.();
         if(
           // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
           // && 
@@ -2948,9 +2956,9 @@
           this.isInteractive()
         ){
           this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-          globalThis.__Ziko__.__HYDRATION__.map.set(globalThis.__Ziko__.__HYDRATION__.index, ()=>this);
-          globalThis.__Ziko__.__HYDRATION__.increment();
+          globalThis.__Ziko__.__HYDRATION__.register(() => this);
         }
+        globalThis.__Ziko__.__UI__.push(this);
       }
       get element(){
         return this.cache.element;
@@ -3001,14 +3009,13 @@
         return this.element.getBoundingClientRect().left;
       }
       clone(render=false) {
-        const UI = new this.constructor();
-        UI.__proto__=this.__proto__;
-        if(this.items.length){
-          const items = [...this.items].map(n=>n.clone());
-          UI.append(...items);
-        }
-        else UI.element=this.element.cloneNode(true);
-        return UI.render(render);
+        // UI.__proto__=this.__proto__;
+        // if(this.items.length){
+        //   const items = [...this.items].map(n=>n.clone());
+        //   UI.append(...items);
+        // }
+        // else UI.element=this.element.cloneNode(true);
+        // return UI.render(render);
       }
       [Symbol.iterator]() {
         return this.items[Symbol.iterator]();
@@ -3027,14 +3034,14 @@
         this.cache.isFrozzen=freeze;
         return this;
       }
-      setTarget(tg) {
-        if(this.isBody) return ;
-        if (tg?.isZikoUIElement) tg = tg.element;
-        this.unrender();
-        this.target = tg;
-        this.render();
-        return this;
-      }
+      // setTarget(tg) {
+      //   if(this.isBody) return ;
+      //   if (tg?.isZikoUIElement) tg = tg.element;
+      //   this.unrender();
+      //   this.target = tg;
+      //   this.render();
+      //   return this;
+      // }
       describe(label){
         if(label)this.setAttr("aria-label",label);
       }

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Aug 24 2025 12:13:24 GMT+0100 (UTC+01:00)
+  Date : Sun Aug 24 2025 12:52:45 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
@@ -1144,28 +1144,34 @@ function defineParamsGetter$1(target ){
     });
 }
 
-const __UI__={
-    __all__(){
-        return Object.values(this)
-          .filter(Array.isArray)
-          .flat();
-    },
-    querySelectorAll(){
-        return this.__all__().filter(n=>n)
-    },
-    getElementByIndex(index){
-        return this.__all__().find(n=>n.ui_index===index);
-    },
-    getElementById(id){
-        return null;
-    },
-    getElementsByClass(){
-
-    },
-    getElementsByTagName(){
-        
+class UIStore extends Array {
+    constructor(...args) {
+        super(...args); 
     }
-};
+    getItemById(id) {
+        return this.find(n => n.element.id === id);
+    }
+    getItemsByTagName(tag) {
+        return this.filter(n => n.element.tagName.toLowerCase() === tag.toLowerCase());
+    }
+    getElementsByClassName(className) {
+        return this.filter(n => n.element.classList?.contains(className));
+    }
+    querySelector(selector) {
+        const el = globalThis?.document?.querySelector(selector);
+        if (!el) return null;
+        return this.find(ui => ui.element === el) || null;
+    }
+    querySelectorAll(selector) {
+        const els = globalThis?.document?.querySelectorAll(selector);
+        return Array.from(els)
+            .map(el => this.find(ui => ui.element === el))
+            .filter(Boolean);
+    }
+}
+
+// create the singleton
+const __UI__ = new UIStore();
 
 const __Config__ = {
     default:{
@@ -1188,10 +1194,10 @@ const __Config__ = {
 };
 
 const __HYDRATION__ = {
-    map : new Map(),
+    store : new Map(),
     index : 0,
-    increment : function(){
-        return this.index ++
+    register: function(component){
+        this.store.set(this.index++, component);
     }
 };
 
@@ -1199,6 +1205,9 @@ const __CACHE__ = {
     ui_index : 0,
     get_ui_index:function(){
         return this.ui_index ++
+    },
+    register_ui: function(UIElement){
+        
     }
 };
 
@@ -1221,7 +1230,6 @@ function __init__global__(){
                     __UI__,
                     __HYDRATION__,
                     __State__,
-                    // __HYDRATION_MAP__,
                     __Config__,
                     __CACHE__,
                 };
@@ -2869,7 +2877,7 @@ const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQ
 
 __init__global__();
 class UIElement extends UINode{
-  constructor({element, name ='', type="html", useDefaultStyle=false}={}){
+  constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render, useDefaultStyle=false}={}){
     super();
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
@@ -2920,8 +2928,8 @@ class UIElement extends UINode{
       resize:null,
       intersection:null
     };
-    if(element)Object.assign(this.cache,{element});
-    this.uuid = `${this.cache.name}-${Random.string(16)}`;
+    if(element) Object.assign(this.cache,{element});
+    // this.uuid = `${this.cache.name}-${Random.string(16)}`
     this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
     useDefaultStyle && this.style({ 
       position: "relative",
@@ -2931,9 +2939,9 @@ class UIElement extends UINode{
       width : "auto",
       height : "auto"
      });
-    this.items = [];
+    this.items = new UIStore();
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-    element && globalThis.__Ziko__.__Config__.default.render && this?.render?.();
+    element && render && this?.render?.();
     if(
       // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
       // && 
@@ -2942,9 +2950,9 @@ class UIElement extends UINode{
       this.isInteractive()
     ){
       this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-      globalThis.__Ziko__.__HYDRATION__.map.set(globalThis.__Ziko__.__HYDRATION__.index, ()=>this);
-      globalThis.__Ziko__.__HYDRATION__.increment();
+      globalThis.__Ziko__.__HYDRATION__.register(() => this);
     }
+    globalThis.__Ziko__.__UI__.push(this);
   }
   get element(){
     return this.cache.element;
@@ -2995,14 +3003,13 @@ class UIElement extends UINode{
     return this.element.getBoundingClientRect().left;
   }
   clone(render=false) {
-    const UI = new this.constructor();
-    UI.__proto__=this.__proto__;
-    if(this.items.length){
-      const items = [...this.items].map(n=>n.clone());
-      UI.append(...items);
-    }
-    else UI.element=this.element.cloneNode(true);
-    return UI.render(render);
+    // UI.__proto__=this.__proto__;
+    // if(this.items.length){
+    //   const items = [...this.items].map(n=>n.clone());
+    //   UI.append(...items);
+    // }
+    // else UI.element=this.element.cloneNode(true);
+    // return UI.render(render);
   }
   [Symbol.iterator]() {
     return this.items[Symbol.iterator]();
@@ -3021,14 +3028,14 @@ class UIElement extends UINode{
     this.cache.isFrozzen=freeze;
     return this;
   }
-  setTarget(tg) {
-    if(this.isBody) return ;
-    if (tg?.isZikoUIElement) tg = tg.element;
-    this.unrender();
-    this.target = tg;
-    this.render();
-    return this;
-  }
+  // setTarget(tg) {
+  //   if(this.isBody) return ;
+  //   if (tg?.isZikoUIElement) tg = tg.element;
+  //   this.unrender();
+  //   this.target = tg;
+  //   this.render();
+  //   return this;
+  // }
   describe(label){
     if(label)this.setAttr("aria-label",label);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "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/__ziko__/__cache__.js

@@ -2,5 +2,8 @@ export const __CACHE__ = {
     ui_index : 0,
     get_ui_index:function(){
         return this.ui_index ++
+    },
+    register_ui: function(UIElement){
+        
     }
 }

package/src/__ziko__/__hydration__.js

@@ -1,8 +1,7 @@
 export const __HYDRATION__ = {
-    map : new Map(),
+    store : new Map(),
     index : 0,
-    increment : function(){
-        return this.index ++
+    register: function(component){
+        this.store.set(this.index++, component)
     }
-}
-export const __HYDRATION_MAP__ = new Map()
+}

package/src/__ziko__/__state__.js

@@ -3,7 +3,7 @@ export const __State__ = {
     index : import.meta.hot?.data?.__Ziko__?.__State__?.index ?? 0,
     register: function(state){
         console.log({
-            hmr : import.meta.hot?.data.__Ziko__.__State__.index,
+            // hmr : import.meta.hot?.data.__Ziko__.__State__.index,
             index : this.index
         })
         this.store.set(this.index++, state)

package/src/__ziko__/__ui__.js

@@ -1,22 +1,28 @@
-export const __UI__={
-    __all__(){
-        return Object.values(this)
-          .filter(Array.isArray)
-          .flat();
-    },
-    querySelectorAll(){
-        return this.__all__().filter(n=>n)
-    },
-    getElementByIndex(index){
-        return this.__all__().find(n=>n.ui_index===index);
-    },
-    getElementById(id){
-        return null;
-    },
-    getElementsByClass(){
-
-    },
-    getElementsByTagName(){
-        
+export class UIStore extends Array {
+    constructor(...args) {
+        super(...args); 
+    }
+    getItemById(id) {
+        return this.find(n => n.element.id === id);
+    }
+    getItemsByTagName(tag) {
+        return this.filter(n => n.element.tagName.toLowerCase() === tag.toLowerCase());
+    }
+    getElementsByClassName(className) {
+        return this.filter(n => n.element.classList?.contains(className));
     }
-}
+    querySelector(selector) {
+        const el = globalThis?.document?.querySelector(selector);
+        if (!el) return null;
+        return this.find(ui => ui.element === el) || null;
+    }
+    querySelectorAll(selector) {
+        const els = globalThis?.document?.querySelectorAll(selector);
+        return Array.from(els)
+            .map(el => this.find(ui => ui.element === el))
+            .filter(Boolean);
+    }
+}
+
+// create the singleton
+export const __UI__ = new UIStore();

package/src/__ziko__/index.js

@@ -1,7 +1,7 @@
 import { defineParamsGetter } from './params.js';
 import { __UI__ } from './__ui__.js';
 import { __Config__ } from './__config__.js';
-import { __HYDRATION__, __HYDRATION_MAP__ } from './__hydration__.js';
+import { __HYDRATION__ } from './__hydration__.js';
 import { __CACHE__ } from './__cache__.js';
 import { __State__ } from './__state__.js';
 export function __init__global__(){
@@ -10,10 +10,10 @@ export function __init__global__(){
                     __UI__,
                     __HYDRATION__,
                     __State__,
-                    // __HYDRATION_MAP__,
                     __Config__,
                     __CACHE__,
                 };
         defineParamsGetter(__Ziko__)
     }
 }
+export { UIStore } from './__ui__.js'

package/src/ui/__utils__/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement.js";
+import { UIElement } from "../constructors/UIElement.js";
 const Id = (a) => document.getElementById(a);
 const Class = (a) => [...document.getElementsByClassName(a)];
 const $=(...selector)=>{

package/src/ui/constructors/UIElement.js

@@ -1,4 +1,4 @@
-import UINode from "./UINode.js";
+import {UINode} from "./UINode.js";
 import { register } from "../../__helpers__/register/index.js";
 import { 
   AttrsMethods,
@@ -7,7 +7,6 @@ import {
   EventsMethodes,
   StyleMethods
 } from "../__methods__/index.js";
-
 import { 
   useCustomEvent,
   useSwipeEvent,
@@ -16,11 +15,11 @@ import {
   watchAttr,
   watchChildren
 } from "../../reactivity/index.js"
-import { Random } from "../../math/index.js";
-import {__init__global__} from '../../__ziko__/index.js';
+// import { Random } from "../../math/index.js";
+import {__init__global__, UIStore} from '../../__ziko__/index.js';
 __init__global__()
 class UIElement extends UINode{
-  constructor({element, name ='', type="html", useDefaultStyle=false}={}){
+  constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render, useDefaultStyle=false}={}){
     super()
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
@@ -71,8 +70,8 @@ class UIElement extends UINode{
       resize:null,
       intersection:null
     }
-    if(element)Object.assign(this.cache,{element});
-    this.uuid = `${this.cache.name}-${Random.string(16)}`
+    if(element) Object.assign(this.cache,{element});
+    // this.uuid = `${this.cache.name}-${Random.string(16)}`
     this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
     useDefaultStyle && this.style({ 
       position: "relative",
@@ -82,9 +81,9 @@ class UIElement extends UINode{
       width : "auto",
       height : "auto"
      });
-    this.items = [];
+    this.items = new UIStore();
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-    element && globalThis.__Ziko__.__Config__.default.render && this?.render?.()
+    element && render && this?.render?.()
     if(
       // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
       // && 
@@ -93,9 +92,9 @@ class UIElement extends UINode{
       this.isInteractive()
     ){
       this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-      globalThis.__Ziko__.__HYDRATION__.map.set(globalThis.__Ziko__.__HYDRATION__.index, ()=>this);
-      globalThis.__Ziko__.__HYDRATION__.increment()
+      globalThis.__Ziko__.__HYDRATION__.register(() => this)
     }
+    globalThis.__Ziko__.__UI__.push(this)
   }
   get element(){
     return this.cache.element;
@@ -146,14 +145,13 @@ class UIElement extends UINode{
     return this.element.getBoundingClientRect().left;
   }
   clone(render=false) {
-    const UI = new this.constructor();
-    UI.__proto__=this.__proto__;
-    if(this.items.length){
-      const items = [...this.items].map(n=>n.clone());
-      UI.append(...items);
-    }
-    else UI.element=this.element.cloneNode(true);
-    return UI.render(render);
+    // UI.__proto__=this.__proto__;
+    // if(this.items.length){
+    //   const items = [...this.items].map(n=>n.clone());
+    //   UI.append(...items);
+    // }
+    // else UI.element=this.element.cloneNode(true);
+    // return UI.render(render);
   }
   [Symbol.iterator]() {
     return this.items[Symbol.iterator]();
@@ -172,14 +170,14 @@ class UIElement extends UINode{
     this.cache.isFrozzen=freeze;
     return this;
   }
-  setTarget(tg) {
-    if(this.isBody) return ;
-    if (tg?.isZikoUIElement) tg = tg.element;
-    this.unrender();
-    this.target = tg;
-    this.render();
-    return this;
-  }
+  // setTarget(tg) {
+  //   if(this.isBody) return ;
+  //   if (tg?.isZikoUIElement) tg = tg.element;
+  //   this.unrender();
+  //   this.target = tg;
+  //   this.render();
+  //   return this;
+  // }
   describe(label){
     if(label)this.setAttr("aria-label",label)
   }
@@ -254,4 +252,4 @@ class UIElement extends UINode{
   }
 
 }
-export default UIElement;
+export { UIElement }

package/src/ui/constructors/UINode.js

@@ -1,4 +1,4 @@
-export default class UINode {
+export class UINode {
     constructor(node){
         this.cache = {
             node
@@ -12,4 +12,4 @@ export default class UINode {
     } 
 }
 
-globalThis.node = (node) => new UINode(node);
+// globalThis.node = (node) => new UINode(node);

package/src/ui/flex/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement.js";
+import { UIElement } from "../constructors/UIElement.js";
 class ZikoUIFlex extends UIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
     super({element : tag , name : "Flex"});

package/src/ui/graphics/canvas.js

@@ -1,4 +1,4 @@
-import  UIElement from "../constructors/UIElement.js";
+import {UIElement} from "../constructors/UIElement.js";
 import {Matrix} from "../../math/matrix/Matrix.js"
 class ZikoUICanvas extends UIElement{
     constructor(w,h){

package/src/ui/graphics/svg.js

@@ -1,4 +1,4 @@
-import UIElement  from "../constructors/UIElement.js";
+import {UIElement}  from "../constructors/UIElement.js";
 class ZikoUISvg extends UIElement {
     constructor(w=360,h=300) {
       super("svg","svg");

package/src/ui/grid/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement.js"
+import {UIElement} from "../constructors/UIElement.js"
 class ZikoUIGrid extends UIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
       super({element : tag, name : "Grid"});

package/src/ui/index.js

@@ -1,5 +1,5 @@
-export { default as UIElement } from "./constructors/UIElement.js"
-export { default as UINode } from "./constructors/UINode.js"
+export * from "./constructors/UIElement.js"
+export * from "./constructors/UINode.js"
 export * from './tags/index.js';
 export * from './text/index.js';
 export * from './flex/index.js';

package/src/ui/suspense/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement";
+import {UIElement} from "../constructors/UIElement";
 class ZikoUISuspense extends UIElement{
     constructor(fallback_ui, callback){
         super({element : "div", name : "suspense"})

package/src/ui/tags/index.d.ts.txt

@@ -1,4 +1,4 @@
-import UIElement from "../elements/UIElement.js";
+import {UIElement} from "../elements/UIElement.js";
 interface HtmlTags {
     a: UIElement;
     abbr: UIElement;

package/src/ui/tags/index.js

@@ -1,6 +1,6 @@
-import UIElement from "../constructors/UIElement.js";
+import {UIElement} from "../constructors/UIElement.js";
 import { HTMLTags, SVGTags } from "./tags-list.js";
-import { isStateGetter } from "../../hooks/use-state.js";
+// import { isStateGetter } from "../../hooks/use-state.js";
 const _h=(tag, type, attributes, ...children)=>{
     const { name, style, ...attrs } = attributes;
     let element = new UIElement(tag, name, type);

package/src/ui/text/index.js

@@ -1,4 +1,4 @@
-import UINode from "../constructors/UINode.js";
+import {UINode} from "../constructors/UINode.js";
 class ZikoUIText extends UINode {
     constructor(...value) {
       super("span", "text", false, ...value);

package/src/ui/wrapper/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement.js";
+import {UIElement} from "../constructors/UIElement.js";
 class ZikoUIXMLWrapper extends UIElement{
     constructor(XMLContent, type){
         super({element : "div", name : ""})