ziko 0.38.0 → 0.38.1

package/dist/ziko.mjs

@@ -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
@@ -945,21 +945,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 = ",") => {
@@ -1074,36 +1059,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)) {
@@ -1119,15 +1095,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) {
@@ -1248,22 +1219,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',
@@ -1675,6 +1630,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;
@@ -3282,23 +3253,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")
@@ -3307,18 +3281,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())],
@@ -3386,10 +3349,6 @@ class ZikoUIElement extends ZikoUINode{
   isZikoUIElement(){
     return true;
   }
-  register(){
-
-    return this;
-  }
   get st(){
     return this.cache.style;
   }
@@ -3706,27 +3665,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" :
@@ -5798,8 +5770,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.38.0",
+  "version": "0.38.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",
@@ -60,6 +60,7 @@
     "./time": {},
     "./components": {}
   },
+  "sideEffects" : false,
   "bin": {
     "create-ziko-app": "starter/bin/index.js"
   },

package/src/__helpers__/composition-dep/compose-class.js

@@ -0,0 +1,46 @@
+export function composeClass(Class, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+
+  class Composed extends Class {
+    constructor(...args) {
+      super(...args);
+      // ⚠️ Do NOT assign mixin functions to `this`
+    }
+  }
+
+  // Copy prototype properties (methods, getters/setters, non-functions)
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+
+    if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+      Object.defineProperty(Composed.prototype, key, desc);
+    } else if (typeof desc.value === 'function') {
+      // Only add method if it does NOT already exist
+      if (!Composed.prototype.hasOwnProperty(key)) {
+        Object.defineProperty(Composed.prototype, key, desc);
+      }
+    }
+  }
+
+  return Composed;
+}
+
+// // Usage
+// class UIBase {
+//   log() { console.log('UIBase log'); }
+// }
+
+// const mixin = {
+//   at() { return 0; },
+//   hello() { return 'hello'; }
+// };
+
+// const UIComposed = composeClass(UIBase, mixin);
+
+// class UI2 extends UIComposed {
+//   at() { return 1; }  // ✅ correctly overrides mixin
+// }
+
+// const ui = new UI2();
+// console.log(ui.at());    // 1
+// console.log(ui.hello()); // 'hello'

package/src/__helpers__/register/index.js

@@ -0,0 +1,6 @@
+import { register_to_class } from "./register-to-class.js";
+import { register_to_instance } from "./register-to-instance";
+export const register = (target, ...mixins) => {
+  if(typeof target === 'function') register_to_class(target, ...mixins)
+  else register_to_instance(target, ...mixins)
+  }

package/src/__helpers__/register/register-to-class.js

@@ -0,0 +1,16 @@
+export 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);
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+    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);
+      }
+    }
+  }
+}

package/src/__helpers__/register/register-to-instance.js

@@ -0,0 +1,18 @@
+export 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)) {
+    const desc = descriptors[key];
+
+    if ('get' in desc || 'set' in desc) {
+      Object.defineProperty(instance, key, desc);
+    } else if (typeof desc.value === 'function') {
+      instance[key] = desc.value.bind(instance);
+    } else {
+      instance[key] = desc.value;
+    }
+  }
+}

package/src/__ziko__/index.js

@@ -3,14 +3,15 @@ import { __UI__ } from './__ui__.js';
 import { __Config__ } from './__config__.js';
 import { __HYDRATION__, __HYDRATION_MAP__ } from './__hydration__.js';
 import { __CACHE__ } from './__cache__.js';
-
-if ( !globalThis?.__Ziko__ ){
-    globalThis.__Ziko__ = {
-                __UI__,
-                __HYDRATION__,
-                __HYDRATION_MAP__,
-                __Config__,
-                __CACHE__,
-            };
-    defineParamsGetter(__Ziko__)
-}
+export function __init__global__(){
+    if ( !globalThis?.__Ziko__ ){
+        globalThis.__Ziko__ = {
+                    __UI__,
+                    __HYDRATION__,
+                    __HYDRATION_MAP__,
+                    __Config__,
+                    __CACHE__,
+                };
+        defineParamsGetter(__Ziko__)
+    }
+}

package/src/hooks/use-state.js

@@ -45,3 +45,8 @@ export function useState(initialValue) {
 
     return [getValue, setValue, controller];
 }
+
+export const isStateGetter = (arg) => {
+    return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
+}
+

package/src/ui/__methods__/index.js

@@ -0,0 +1,4 @@
+export * from './dom.js'
+export * from './events.js'
+export * from './indexing.js'
+// export * from './style.js'

package/src/ui/constructors/ZikoUIElement.js

@@ -1,10 +1,13 @@
 import ZikoUINode from "./ZikoUINode.js";
-import { compose } from "../../__helpers__/index.js";
-import { DomMethods } from "../__methods__/dom.js";
-import { IndexingMethods } from "../__methods__/indexing.js";
-import { EventsMethodes } from "../__methods__/events.js";
+import { register } from "../../__helpers__/register/index.js";
+import { 
+  DomMethods,
+  IndexingMethods,
+  EventsMethodes
+} from "../__methods__/index.js";
 import { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
 import { ZikoUIElementStyle } from "./style/index.js";
+
 import { 
   useCustomEvent,
   useSwipeEvent,
@@ -15,13 +18,14 @@ import {
 } from "../../reactivity/index.js"
 import { Random } from "../../math/index.js";
 import { Str } from "../../data/index.js";
-import '../../__ziko__/index.js';
+import {__init__global__} from '../../__ziko__/index.js';
+__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")
@@ -30,18 +34,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())],
@@ -109,10 +102,6 @@ class ZikoUIElement extends ZikoUINode{
   isZikoUIElement(){
     return true;
   }
-  register(){
-
-    return this;
-  }
   get st(){
     return this.cache.style;
   }

package/src/ui/tags/index.js

@@ -1,5 +1,6 @@
 import ZikoUIElement from "../constructors/ZikoUIElement.js";
 import { HTMLTags, SVGTags } from "./tags-list.js";
+import { isStateGetter } from "../../hooks/use-state.js";
 const _h=(tag, type, attributes, ...children)=>{
     const { name, style, ...attrs } = attributes;
     let element = new ZikoUIElement(tag, name, type);
@@ -15,23 +16,32 @@ 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);
+      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){
+    // 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" :

package/src/__helpers__/composition/compose-class.js

@@ -1,28 +0,0 @@
-export function composeClass(Class, 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);
-    }
-  }
-
-  return Composed;
-}