ziko 0.42.0 → 0.42.1

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.42.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/__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__/__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/__methods__/style.js

@@ -1,23 +1,23 @@
 import { isStateGetter } from '../../hooks/use-state.js'
 export const StyleMethods = {
-    style(styles){
-        for(let key in styles){
-            const value = styles[key];
-            if(isStateGetter(value)){
-                const getter = value()
-                Object.assign(this.element.style, {[key] : getter.value})
-                getter._subscribe(
-                    (newValue) => {
-                        console.log({newValue})
-                        Object.assign(this.element.style, {[key] : newValue})
-                    },
-                    // this 
-                );
-            }
-            else Object.assign(this.element.style, {[key] : value})
-        }
-        return this;
-    },
+    // style(styles){
+    //     for(let key in styles){
+    //         const value = styles[key];
+    //         if(isStateGetter(value)){
+    //             const getter = value()
+    //             Object.assign(this.element.style, {[key] : getter.value})
+    //             getter._subscribe(
+    //                 (newValue) => {
+    //                     console.log({newValue})
+    //                     Object.assign(this.element.style, {[key] : newValue})
+    //                 },
+    //                 // this 
+    //             );
+    //         }
+    //         else Object.assign(this.element.style, {[key] : value})
+    //     }
+    //     return this;
+    // },
     size(width, height){
         return this.style({width, height})
     },

package/src/ui/constructors/UIElement.js

@@ -7,7 +7,7 @@ import {
   EventsMethodes,
   StyleMethods
 } from "../__methods__/index.js";
-
+import { isStateGetter } from "../../hooks/use-state.js";
 import { 
   useCustomEvent,
   useSwipeEvent,
@@ -16,11 +16,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 +71,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 +82,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 +93,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;
@@ -106,6 +106,24 @@ class UIElement extends UINode{
   isZikoUIElement(){
     return true;
   }
+  style(styles){
+    for(let key in styles){
+        const value = styles[key];
+        if(isStateGetter(value)){
+            const getter = value()
+            Object.assign(this.element.style, {[key] : getter.value})
+            getter._subscribe(
+                (newValue) => {
+                    console.log({newValue})
+                    Object.assign(this.element.style, {[key] : newValue})
+                },
+                // this 
+            );
+        }
+        else Object.assign(this.element.style, {[key] : value})
+    }
+    return this;
+  }
   get st(){
     return this.cache.style;
   }
@@ -146,14 +164,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 +189,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)
   }