ziko 0.38.0 → 0.38.1

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Aug 15 2025 21:37:17 GMT+0100 (UTC+01:00)
+  Date : Sun Aug 17 2025 21:52:49 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
@@ -947,21 +947,6 @@ const preload=(url)=>{
     }
 };
 
-async function fetchdom(url='https://github.com/zakarialaoui10'){
-  const data=await fetch(url);
-  const html=await data.text();
-  const dom= new DOMParser().parseFromString(html,'text/xml');
-  return dom.documentElement
-}
-function fetchdomSync(url='https://github.com/zakarialaoui10'){
-  const data=preload(url);
-  const dom= new DOMParser().parseFromString(data,'text/xml');
-  return dom.documentElement;
-}
-
-globalThis.fetchdom=fetchdom;
-globalThis.fetchdomSync=fetchdomSync;
-
 const csv2arr = (csv, delimiter = ",")=>csv.trim().trimEnd().split("\n").map(n=>n.split(delimiter));
 const csv2matrix = (csv, delimiter = ",")=>new Matrix(csv2arr(csv,delimiter));
 const csv2object = (csv, delimiter = ",") => {
@@ -1076,36 +1061,27 @@ class ZikoUINode {
 
 globalThis.node = (node) => new ZikoUINode(node);
 
-function composeClass(Class, mixin) {
+function register_to_class(target, ...mixins){
+    mixins.forEach(n => _register_to_class_(target, n));
+}
+function _register_to_class_(target, mixin) {
   const descriptors = Object.getOwnPropertyDescriptors(mixin);
-
-  class Composed extends Class {
-    constructor(...args) {
-      super(...args);
-      for (const key of Reflect.ownKeys(descriptors)) {
-        const desc = descriptors[key];
-
-        if (typeof desc.value === 'function') {
-          this[key] = desc.value.bind(this);
-        }
-      }
-    }
-  }
-
   for (const key of Reflect.ownKeys(descriptors)) {
     const desc = descriptors[key];
-
-    if ('get' in desc || 'set' in desc) {
-      Object.defineProperty(Composed.prototype, key, desc);
-    } else if (typeof desc.value !== 'function') {
-      Object.defineProperty(Composed.prototype, key, desc);
+    if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+      Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+    } else if (typeof desc.value === 'function') {
+      if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
+        Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+      }
     }
   }
-
-  return Composed;
 }
 
-function composeInstance(instance, mixin) {
+function register_to_instance(target, ...mixins){
+    mixins.forEach(n => _register_to_instance_(target, n));
+}
+function _register_to_instance_(instance, mixin) {
   const descriptors = Object.getOwnPropertyDescriptors(mixin);
 
   for (const key of Reflect.ownKeys(descriptors)) {
@@ -1121,15 +1097,10 @@ function composeInstance(instance, mixin) {
   }
 }
 
-function compose(target, ...mixin) {
-  if (typeof target === 'function') {
-    return mixin.forEach(item =>composeClass(target, item));
-  } else if (typeof target === 'object') {
-    mixin.forEach(item =>composeInstance(target, item));
-  } else {
-    throw new TypeError("compose: target must be a class or instance");
-  }
-}
+const register = (target, ...mixins) => {
+  if(typeof target === 'function') register_to_class(target, ...mixins);
+  else register_to_instance(target, ...mixins);
+  };
 
 class ZikoUIText extends ZikoUINode {
     constructor(...value) {
@@ -1250,22 +1221,6 @@ function __addItem__(adder, pusher, ...ele) {
   return this;
 }
 
-const IndexingMethods = {
-  at(index) {
-    return this.items.at(index);
-  },
-  forEach(callback) {
-    this.items.forEach(callback);
-    return this;
-  },
-  map(callback) {
-    return this.items.map(callback);
-  },
-  find(condition) {
-    return this.items.filter(condition);
-  },
-};
-
 const Events = {
     'Click' : [
         'Click',
@@ -1677,6 +1632,22 @@ Object.entries(Events).forEach(([name, eventList]) => {
   });
 });
 
+const IndexingMethods = {
+  at(index) {
+    return this.items.at(index);
+  },
+  forEach(callback) {
+    this.items.forEach(callback);
+    return this;
+  },
+  map(callback) {
+    return this.items.map(callback);
+  },
+  find(condition) {
+    return this.items.filter(condition);
+  },
+};
+
 class ZikoUseStyle {
   constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
     this.id = "Ziko-Style-" + id;
@@ -3284,23 +3255,26 @@ const __CACHE__ = {
     }
 };
 
-if ( !globalThis?.__Ziko__ ){
-    globalThis.__Ziko__ = {
-                __UI__,
-                __HYDRATION__,
-                __HYDRATION_MAP__,
-                __Config__,
-                __CACHE__,
-            };
-    defineParamsGetter$1(__Ziko__);
+function __init__global__(){
+    if ( !globalThis?.__Ziko__ ){
+        globalThis.__Ziko__ = {
+                    __UI__,
+                    __HYDRATION__,
+                    __HYDRATION_MAP__,
+                    __Config__,
+                    __CACHE__,
+                };
+        defineParamsGetter$1(__Ziko__);
+    }
 }
 
+__init__global__();
 class ZikoUIElement extends ZikoUINode{
-  constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
+  constructor(element, name="", {type="html", useDefaultStyle=false}={}){
     super();
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
-      switch(el_type){
+      switch(type){
         case "html" : element = globalThis?.document?.createElement(element); break;
         case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
         default : throw Error("Not supported")
@@ -3309,18 +3283,7 @@ class ZikoUIElement extends ZikoUINode{
     else {
       this.target = element.parentElement;
     }
-    // if(element)this.__ele__ = element;
-    compose(
-      this, 
-      DomMethods,
-      IndexingMethods,
-      EventsMethodes
-    );
-    // if(false){
-    //   import("../methods/tree.js").then(({ default: ExternalMethods }) => {
-    //     compose(this, ExternalMethods);
-    //   });
-    // }
+    register(this, DomMethods, IndexingMethods, EventsMethodes);
     Object.assign(this.cache, {
       name,
       isInteractive : [true, false][Math.floor(2*Math.random())],
@@ -3388,10 +3351,6 @@ class ZikoUIElement extends ZikoUINode{
   isZikoUIElement(){
     return true;
   }
-  register(){
-
-    return this;
-  }
   get st(){
     return this.cache.style;
   }
@@ -3708,27 +3667,40 @@ const SVGTags = [
     "desc", "title", "metadata", "foreignObject"
   ];
 
+const isStateGetter = (arg) => {
+    return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
+};
+
 const tags = new Proxy({}, {
   get(target, prop) {
     if (typeof prop !== 'string') return undefined;
     let tag = prop.replaceAll("_","-").toLowerCase();
+    let type ;
+    if(HTMLTags.includes(tag)) type = 'html';
+    if(SVGTags.includes(tag)) type = 'svg';
     if(HTMLTags.includes(tag)) return (...args)=>{
-      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-        let attributes = args.shift();
-        // console.log(args)
-        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-      }
-      return new ZikoUIElement(tag).append(...args);
-    }
-    if(SVGTags.includes(tag)) return (...args)=>new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
-    return (...args)=>{
-      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-        let attributes = args.shift();
-        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-      }
-      return new ZikoUIElement(tag).append(...args);
-    }
-    // switch(tag){
+      console.log(isStateGetter(args[0]));
+    //  if(typeof args[0] === 'function') {
+    //   console.log(args[0], args[0]?.() instanceof StateGetter)
+    //   globalThis.a = args[0]
+    //   console.log({t : a.constructor})
+    //  }
+      if(
+        ['string', 'number'].includes(typeof args[0]) 
+        || args[0] instanceof ZikoUIElement 
+        || (typeof args[0] === 'function' && args[0]().isStateGetter())
+      ) return new ZikoUIElement(tag, tag, {type}).append(...args);
+      return new ZikoUIElement(tag).setAttr(args.shift()).append(...args)
+    }
+    // if(SVGTags.includes(tag)) return (...args) => new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
+    // return (...args)=>{
+    //   if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+    //     let attributes = args.shift()
+    //     return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+    //   }
+    //   return new ZikoUIElement(tag).append(...args);
+    // }
+    // // switch(tag){
     //   case "html"  : globalThis?.document?.createElement("html")
     //   case "head"  :
     //   case "style" :
@@ -5800,8 +5772,7 @@ class ZikoTimeAnimation{
 const useAnimation=(callback,ease=Ease.Linear,step=50,config)=>new ZikoTimeAnimation(callback,ease=Ease.Linear,step=50,config);
 
 const debounce=(fn,delay=1000)=>{
-    let id;
-    return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
+    return (...args) => setTimeout(()=>fn(...args),delay);
 };
 const throttle=(fn,delay)=>{
     let lastTime=0;

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Aug 15 2025 21:37:17 GMT+0100 (UTC+01:00)
+  Date : Sun Aug 17 2025 21:52:49 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
@@ -951,21 +951,6 @@
         }
     };
 
-    async function fetchdom(url='https://github.com/zakarialaoui10'){
-      const data=await fetch(url);
-      const html=await data.text();
-      const dom= new DOMParser().parseFromString(html,'text/xml');
-      return dom.documentElement
-    }
-    function fetchdomSync(url='https://github.com/zakarialaoui10'){
-      const data=preload(url);
-      const dom= new DOMParser().parseFromString(data,'text/xml');
-      return dom.documentElement;
-    }
-
-    globalThis.fetchdom=fetchdom;
-    globalThis.fetchdomSync=fetchdomSync;
-
     const csv2arr = (csv, delimiter = ",")=>csv.trim().trimEnd().split("\n").map(n=>n.split(delimiter));
     const csv2matrix = (csv, delimiter = ",")=>new Matrix(csv2arr(csv,delimiter));
     const csv2object = (csv, delimiter = ",") => {
@@ -1080,36 +1065,27 @@
 
     globalThis.node = (node) => new ZikoUINode(node);
 
-    function composeClass(Class, mixin) {
+    function register_to_class(target, ...mixins){
+        mixins.forEach(n => _register_to_class_(target, n));
+    }
+    function _register_to_class_(target, mixin) {
       const descriptors = Object.getOwnPropertyDescriptors(mixin);
-
-      class Composed extends Class {
-        constructor(...args) {
-          super(...args);
-          for (const key of Reflect.ownKeys(descriptors)) {
-            const desc = descriptors[key];
-
-            if (typeof desc.value === 'function') {
-              this[key] = desc.value.bind(this);
-            }
-          }
-        }
-      }
-
       for (const key of Reflect.ownKeys(descriptors)) {
         const desc = descriptors[key];
-
-        if ('get' in desc || 'set' in desc) {
-          Object.defineProperty(Composed.prototype, key, desc);
-        } else if (typeof desc.value !== 'function') {
-          Object.defineProperty(Composed.prototype, key, desc);
+        if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+          Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+        } else if (typeof desc.value === 'function') {
+          if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
+            Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+          }
         }
       }
-
-      return Composed;
     }
 
-    function composeInstance(instance, mixin) {
+    function register_to_instance(target, ...mixins){
+        mixins.forEach(n => _register_to_instance_(target, n));
+    }
+    function _register_to_instance_(instance, mixin) {
       const descriptors = Object.getOwnPropertyDescriptors(mixin);
 
       for (const key of Reflect.ownKeys(descriptors)) {
@@ -1125,15 +1101,10 @@
       }
     }
 
-    function compose(target, ...mixin) {
-      if (typeof target === 'function') {
-        return mixin.forEach(item =>composeClass(target, item));
-      } else if (typeof target === 'object') {
-        mixin.forEach(item =>composeInstance(target, item));
-      } else {
-        throw new TypeError("compose: target must be a class or instance");
-      }
-    }
+    const register = (target, ...mixins) => {
+      if(typeof target === 'function') register_to_class(target, ...mixins);
+      else register_to_instance(target, ...mixins);
+      };
 
     class ZikoUIText extends ZikoUINode {
         constructor(...value) {
@@ -1254,22 +1225,6 @@
       return this;
     }
 
-    const IndexingMethods = {
-      at(index) {
-        return this.items.at(index);
-      },
-      forEach(callback) {
-        this.items.forEach(callback);
-        return this;
-      },
-      map(callback) {
-        return this.items.map(callback);
-      },
-      find(condition) {
-        return this.items.filter(condition);
-      },
-    };
-
     const Events = {
         'Click' : [
             'Click',
@@ -1681,6 +1636,22 @@
       });
     });
 
+    const IndexingMethods = {
+      at(index) {
+        return this.items.at(index);
+      },
+      forEach(callback) {
+        this.items.forEach(callback);
+        return this;
+      },
+      map(callback) {
+        return this.items.map(callback);
+      },
+      find(condition) {
+        return this.items.filter(condition);
+      },
+    };
+
     class ZikoUseStyle {
       constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
         this.id = "Ziko-Style-" + id;
@@ -3288,23 +3259,26 @@
         }
     };
 
-    if ( !globalThis?.__Ziko__ ){
-        globalThis.__Ziko__ = {
-                    __UI__,
-                    __HYDRATION__,
-                    __HYDRATION_MAP__,
-                    __Config__,
-                    __CACHE__,
-                };
-        defineParamsGetter$1(__Ziko__);
+    function __init__global__(){
+        if ( !globalThis?.__Ziko__ ){
+            globalThis.__Ziko__ = {
+                        __UI__,
+                        __HYDRATION__,
+                        __HYDRATION_MAP__,
+                        __Config__,
+                        __CACHE__,
+                    };
+            defineParamsGetter$1(__Ziko__);
+        }
     }
 
+    __init__global__();
     class ZikoUIElement extends ZikoUINode{
-      constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
+      constructor(element, name="", {type="html", useDefaultStyle=false}={}){
         super();
         this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
         if(typeof element === "string") {
-          switch(el_type){
+          switch(type){
             case "html" : element = globalThis?.document?.createElement(element); break;
             case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
             default : throw Error("Not supported")
@@ -3313,18 +3287,7 @@
         else {
           this.target = element.parentElement;
         }
-        // if(element)this.__ele__ = element;
-        compose(
-          this, 
-          DomMethods,
-          IndexingMethods,
-          EventsMethodes
-        );
-        // if(false){
-        //   import("../methods/tree.js").then(({ default: ExternalMethods }) => {
-        //     compose(this, ExternalMethods);
-        //   });
-        // }
+        register(this, DomMethods, IndexingMethods, EventsMethodes);
         Object.assign(this.cache, {
           name,
           isInteractive : [true, false][Math.floor(2*Math.random())],
@@ -3392,10 +3355,6 @@
       isZikoUIElement(){
         return true;
       }
-      register(){
-
-        return this;
-      }
       get st(){
         return this.cache.style;
       }
@@ -3712,27 +3671,40 @@
         "desc", "title", "metadata", "foreignObject"
       ];
 
+    const isStateGetter = (arg) => {
+        return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
+    };
+
     const tags = new Proxy({}, {
       get(target, prop) {
         if (typeof prop !== 'string') return undefined;
         let tag = prop.replaceAll("_","-").toLowerCase();
+        let type ;
+        if(HTMLTags.includes(tag)) type = 'html';
+        if(SVGTags.includes(tag)) type = 'svg';
         if(HTMLTags.includes(tag)) return (...args)=>{
-          if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-            let attributes = args.shift();
-            // console.log(args)
-            return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-          }
-          return new ZikoUIElement(tag).append(...args);
-        }
-        if(SVGTags.includes(tag)) return (...args)=>new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
-        return (...args)=>{
-          if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-            let attributes = args.shift();
-            return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-          }
-          return new ZikoUIElement(tag).append(...args);
-        }
-        // switch(tag){
+          console.log(isStateGetter(args[0]));
+        //  if(typeof args[0] === 'function') {
+        //   console.log(args[0], args[0]?.() instanceof StateGetter)
+        //   globalThis.a = args[0]
+        //   console.log({t : a.constructor})
+        //  }
+          if(
+            ['string', 'number'].includes(typeof args[0]) 
+            || args[0] instanceof ZikoUIElement 
+            || (typeof args[0] === 'function' && args[0]().isStateGetter())
+          ) return new ZikoUIElement(tag, tag, {type}).append(...args);
+          return new ZikoUIElement(tag).setAttr(args.shift()).append(...args)
+        }
+        // if(SVGTags.includes(tag)) return (...args) => new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
+        // return (...args)=>{
+        //   if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+        //     let attributes = args.shift()
+        //     return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+        //   }
+        //   return new ZikoUIElement(tag).append(...args);
+        // }
+        // // switch(tag){
         //   case "html"  : globalThis?.document?.createElement("html")
         //   case "head"  :
         //   case "style" :
@@ -5804,8 +5776,7 @@
     const useAnimation=(callback,ease=Ease.Linear,step=50,config)=>new ZikoTimeAnimation(callback,ease=Ease.Linear,step=50,config);
 
     const debounce=(fn,delay=1000)=>{
-        let id;
-        return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
+        return (...args) => setTimeout(()=>fn(...args),delay);
     };
     const throttle=(fn,delay)=>{
         let lastTime=0;