ziko 0.44.0 → 0.45.1

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Aug 24 2025 12:13:24 GMT+0100 (UTC+01:00)
+  Date : Sat Aug 30 2025 10:47:14 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
@@ -1074,7 +1074,7 @@ class UINode {
     } 
 }
 
-globalThis.node = (node) => new UINode(node);
+// globalThis.node = (node) => new UINode(node);
 
 function register_to_class(target, ...mixins){
     mixins.forEach(n => _register_to_class_(target, n));
@@ -1146,28 +1146,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:{
@@ -1190,10 +1196,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);
     }
 };
 
@@ -1201,6 +1207,9 @@ const __CACHE__ = {
     ui_index : 0,
     get_ui_index:function(){
         return this.ui_index ++
+    },
+    register_ui: function(UIElement){
+        
     }
 };
 
@@ -1209,7 +1218,7 @@ const __State__ = {
     index : undefined?.data?.__Ziko__?.__State__?.index ?? 0,
     register: function(state){
         console.log({
-            hmr : undefined?.data.__Ziko__.__State__.index,
+            // hmr : import.meta.hot?.data.__Ziko__.__State__.index,
             index : this.index
         });
         this.store.set(this.index++, state);
@@ -1223,7 +1232,6 @@ function __init__global__(){
                     __UI__,
                     __HYDRATION__,
                     __State__,
-                    // __HYDRATION_MAP__,
                     __Config__,
                     __CACHE__,
                 };
@@ -2871,7 +2879,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") {
@@ -2922,8 +2930,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",
@@ -2933,9 +2941,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" 
       // && 
@@ -2944,9 +2952,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;
@@ -2997,14 +3005,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]();
@@ -3023,14 +3030,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);
   }