ziko 0.34.2 → 0.35.1

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Aug 04 2025 13:51:44 GMT+0100 (UTC+01:00)
+  Date : Thu Aug 07 2025 11:37:20 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
@@ -1202,6 +1202,22 @@
       }
   };
 
+  class ZikoUINode {
+      constructor(node){
+          this.cache = {
+              node
+          };
+      }
+      isZikoUINode(){
+          return true
+      }
+      get node(){
+          return this.cache.node;
+      } 
+  }
+
+  globalThis.node = (node) => new ZikoUINode(node);
+
   const DomMethods = {
     append(...ele) {
       __addItem__.call(this, "append", "push", ...ele);
@@ -1728,7 +1744,7 @@
     });
   });
 
-  let ZikoUseStyle$1 = class ZikoUseStyle {
+  class ZikoUseStyle {
     constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
       this.id = "Ziko-Style-" + id;
       this.keys = new Set();
@@ -1800,7 +1816,9 @@
       if (style && typeof style === "object") return this.#useStyleObject(style);
       return this;
     }
-  };
+  }
+
+  const useStyle = (styles, use, id) => new ZikoUseStyle(styles, use, id);
 
   const addSuffixeToNumber=(value,suffixe="px")=>{
     if(typeof value === "number") value+=suffixe;
@@ -3236,82 +3254,6 @@
 
   const useHead$1=({ title, lang, icon, meta, noscript })=>new ZikoHead$1({ title, lang, icon, meta, noscript });
 
-  class ZikoUseStyle {
-    constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
-      this.id = "Ziko-Style-" + id;
-      this.keys = new Set();
-      this.styles = {
-        default: {
-          fontSize: "1em",
-          color : "green"
-        },
-        other: {
-          fontSize : "2em",
-          color : "cyan" 
-        }
-      };
-      style && this.add(style);
-      use && this.use(use);
-    }
-
-    get current() {
-      return [...this.keys].reduce((key, value) => {
-        key[value] = `var(--${value}-${this.id})`;
-        return key;
-      }, {});
-    }
-
-    add(name, style = {}) {
-      if (name && typeof name === 'object' && !Array.isArray(name)) {
-        Object.assign(this.styles, name);
-      } else if (typeof name === 'string') {
-        Object.assign(this.styles, { [name]: style });
-      }
-      return this;
-    }
-
-    #useStyleIndex(index) {
-      const keys = Object.keys(this.styles);
-      for (let a in this.styles[keys[index]]) {
-        if (Object.prototype.hasOwnProperty.call(this.styles[keys[index]], a)) {
-          document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[keys[index]][a]);
-          this.keys.add(a);
-        }
-      }
-      return this;
-    }
-
-    #useStyleName(name) {
-      if (!this.styles[name]) return this;
-      for (let a in this.styles[name]) {
-        if (Object.prototype.hasOwnProperty.call(this.styles[name], a)) {
-          document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[name][a]);
-          this.keys.add(a);
-        }
-      }
-      return this;
-    }
-
-    #useStyleObject(style) {
-      for (let a in style) {
-        if (Object.prototype.hasOwnProperty.call(style, a)) {
-          document.documentElement.style.setProperty(`--${a}-${this.id}`, style[a]);
-          this.keys.add(a);
-        }
-      }
-      return this;
-    }
-
-    use(style) {
-      if (typeof style === "number") return this.#useStyleIndex(style);
-      if (typeof style === "string") return this.#useStyleName(style);
-      if (style && typeof style === "object") return this.#useStyleObject(style);
-      return this;
-    }
-  }
-
-  const useStyle = (styles, use, id) => new ZikoUseStyle(styles, use, id);
-
   /*
    [
               {
@@ -3410,8 +3352,9 @@
       ...Hooks,
   };
 
-  class ZikoUIElement {
+  class ZikoUIElement extends ZikoUINode{
     constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
+      super();
       this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
       if(typeof element === "string") {
         switch(el_type){
@@ -3423,7 +3366,7 @@
       else {
         this.target = element.parentElement;
       }
-      if(element)this.__ele__ = element;
+      // if(element)this.__ele__ = element;
       compose(
         this, 
         DomMethods,
@@ -3435,8 +3378,9 @@
       //     compose(this, ExternalMethods);
       //   });
       // }
-      this.cache = {
+      Object.assign(this.cache, {
         name,
+        isInteractive : [true, false][Math.floor(2*Math.random())],
         parent:null,
         isBody:false,
         isRoot:false,
@@ -3447,7 +3391,7 @@
         attributes: {},
         filters: {},
         temp:{}
-      };
+      });
       this.events = {
         ptr:null,
         mouse:null,
@@ -3465,6 +3409,7 @@
         resize:null,
         intersection:null
       };
+      if(element)Object.assign(this.cache,{element});
       this.uuid = `${this.cache.name}-${Random.string(16)}`;
       this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
       this.cache.style.linkTo(this);
@@ -3492,12 +3437,13 @@
       }
     }
     get element(){
-      return this.__ele__;
+      return this.cache.element;
     }
     isInteractive(){
-      return [true, false][Math.floor(2*Math.random())];
+      return this.cache.isInteractive;
     }
-    get isZikoUIElement(){
+    // Remove get
+    isZikoUIElement(){
       return true;
     }
     register(){
@@ -3554,7 +3500,7 @@
       return UI.render(render);
     }
     style(styles){
-      styles instanceof ZikoUseStyle$1 ? this.st.style(styles.current): this.st.style(styles);
+      styles instanceof ZikoUseStyle ? this.st.style(styles.current): this.st.style(styles);
       return this;
     }
     size(width,height){
@@ -7670,167 +7616,6 @@
       ...CANVAS
   };
 
-  class ZikoUseChannel{
-      constructor(name = ""){
-          this.channel = new BroadcastChannel(name);
-          this.EVENTS_DATAS_PAIRS = new Map();
-          this.EVENTS_HANDLERS_PAIRS = new Map();
-          this.LAST_RECEIVED_EVENT = "";
-          this.UUID="ziko-channel"+Random.string(10);
-          this.SUBSCRIBERS = new Set([this.UUID]);
-      }
-      get broadcast(){
-          // update receiver
-          return this;
-      }
-      emit(event, data){
-          this.EVENTS_DATAS_PAIRS.set(event,data);
-          this.#maintainEmit(event);
-          return this;
-      }
-      on(event,handler=console.log){
-          this.EVENTS_HANDLERS_PAIRS.set(event,handler);
-          this.#maintainOn();
-          return this;
-      }
-      #maintainOn(){
-          this.channel.onmessage = (e) => {
-              this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
-              const USER_ID=e.data.userId;
-              this.SUBSCRIBERS.add(USER_ID);
-              const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
-              const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
-              if(Data && Handler)Handler(Data);
-            };
-            return this;
-      }
-      #maintainEmit(event){
-          this.channel.postMessage({
-              EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
-              last_sended_event:event,
-              userId:this.UUID
-          });
-          return this;
-      }
-      close(){
-          this.channel.close();
-          return this;
-      }
-  }
-  const useChannel = name => new ZikoUseChannel(name);
-
-  // To do : remove old items
-  class ZikoUseStorage{
-      constructor(storage, globalKey, initialValue){
-          this.cache={
-              storage,
-              globalKey,
-              channel:useChannel(`Ziko:useStorage-${globalKey}`),
-              oldItemKeys:new Set()
-          };
-          this.#init(initialValue);
-          this.#maintain();
-      }
-      get items(){
-          return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
-      }
-      #maintain() {
-          for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
-      }
-      #init(initialValue){
-          this.cache.channel=useChannel(`Ziko:useStorage-${this.cache.globalKey}`);
-          this.cache.channel.on("Ziko-Storage-Updated",()=>this.#maintain());
-          if(!initialValue)return;
-          if(this.cache.storage[this.cache.globalKey]){
-              Object.keys(this.items).forEach(key=>this.cache.oldItemKeys.add(key));
-              console.group("Ziko:useStorage");
-              console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
-              console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
-              console.group("");
-          }
-          else this.set(initialValue);
-      }
-      set(data){
-          this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(data));
-          this.cache.channel.emit("Ziko-Storage-Updated",{});
-          Object.keys(data).forEach(key=>this.cache.oldItemKeys.add(key));
-          this.#maintain();
-          return this
-      }
-      add(data){
-          const db={
-              ...this.items,
-              ...data
-          };
-          this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(db));
-          this.#maintain();
-          return this;
-      }
-      remove(...keys){
-          const db={...this.items};
-          for(let i=0;i<keys.length;i++){
-              delete db[keys[i]];
-              delete this[keys[i]];
-          }
-          this.set(db);
-          return this;
-      }
-      get(key){
-          return this.items[key];
-      }
-      clear(){
-          this.cache.storage.removeItem(this.cache.globalKey);
-          this.#maintain();
-          return this;
-      }
-
-  }
-  const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
-  const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
-
-  class ZikoUseThreed {
-      #workerContent;
-      constructor() {
-          this.#workerContent = (
-              function (msg) {
-                  try {
-                      const func = new Function("return " + msg.data.fun)();
-                      let result = func();
-                      postMessage({ result });
-                  } catch (error) {
-                      postMessage({ error: error.message });
-                  } finally {
-                      if (msg.data.close) self.close();
-                  }
-              }
-          ).toString();
-          this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-          this.worker = new Worker(window.URL.createObjectURL(this.blob));
-      }
-      call(func, callback, close = true) {
-          this.worker.postMessage({
-              fun: func.toString(),
-              close
-          });
-          this.worker.onmessage = function (e) {
-              if (e.data.error) {
-                  console.error(e.data.error);
-              } else {
-                  callback(e.data.result);
-              }
-          };
-          return this;
-      }
-  }
-
-  const useThread = (func, callback , close) => {
-      const T = new ZikoUseThreed();
-      if (func) {
-          T.call(func, callback , close);
-      }
-      return T;
-  };
-
   class ZikoUseFavIcon{
       constructor(FavIcon,useEventEmitter=true){
           this.#init();
@@ -8271,6 +8056,167 @@
       // ...Params
   };
 
+  class ZikoUseChannel{
+      constructor(name = ""){
+          this.channel = new BroadcastChannel(name);
+          this.EVENTS_DATAS_PAIRS = new Map();
+          this.EVENTS_HANDLERS_PAIRS = new Map();
+          this.LAST_RECEIVED_EVENT = "";
+          this.UUID="ziko-channel"+Random.string(10);
+          this.SUBSCRIBERS = new Set([this.UUID]);
+      }
+      get broadcast(){
+          // update receiver
+          return this;
+      }
+      emit(event, data){
+          this.EVENTS_DATAS_PAIRS.set(event,data);
+          this.#maintainEmit(event);
+          return this;
+      }
+      on(event,handler=console.log){
+          this.EVENTS_HANDLERS_PAIRS.set(event,handler);
+          this.#maintainOn();
+          return this;
+      }
+      #maintainOn(){
+          this.channel.onmessage = (e) => {
+              this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
+              const USER_ID=e.data.userId;
+              this.SUBSCRIBERS.add(USER_ID);
+              const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
+              const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
+              if(Data && Handler)Handler(Data);
+            };
+            return this;
+      }
+      #maintainEmit(event){
+          this.channel.postMessage({
+              EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
+              last_sended_event:event,
+              userId:this.UUID
+          });
+          return this;
+      }
+      close(){
+          this.channel.close();
+          return this;
+      }
+  }
+  const useChannel = name => new ZikoUseChannel(name);
+
+  // To do : remove old items
+  class ZikoUseStorage{
+      constructor(storage, globalKey, initialValue){
+          this.cache={
+              storage,
+              globalKey,
+              channel:useChannel(`Ziko:useStorage-${globalKey}`),
+              oldItemKeys:new Set()
+          };
+          this.#init(initialValue);
+          this.#maintain();
+      }
+      get items(){
+          return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
+      }
+      #maintain() {
+          for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
+      }
+      #init(initialValue){
+          this.cache.channel=useChannel(`Ziko:useStorage-${this.cache.globalKey}`);
+          this.cache.channel.on("Ziko-Storage-Updated",()=>this.#maintain());
+          if(!initialValue)return;
+          if(this.cache.storage[this.cache.globalKey]){
+              Object.keys(this.items).forEach(key=>this.cache.oldItemKeys.add(key));
+              console.group("Ziko:useStorage");
+              console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
+              console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
+              console.group("");
+          }
+          else this.set(initialValue);
+      }
+      set(data){
+          this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(data));
+          this.cache.channel.emit("Ziko-Storage-Updated",{});
+          Object.keys(data).forEach(key=>this.cache.oldItemKeys.add(key));
+          this.#maintain();
+          return this
+      }
+      add(data){
+          const db={
+              ...this.items,
+              ...data
+          };
+          this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(db));
+          this.#maintain();
+          return this;
+      }
+      remove(...keys){
+          const db={...this.items};
+          for(let i=0;i<keys.length;i++){
+              delete db[keys[i]];
+              delete this[keys[i]];
+          }
+          this.set(db);
+          return this;
+      }
+      get(key){
+          return this.items[key];
+      }
+      clear(){
+          this.cache.storage.removeItem(this.cache.globalKey);
+          this.#maintain();
+          return this;
+      }
+
+  }
+  const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
+  const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
+
+  class ZikoUseThreed {
+      #workerContent;
+      constructor() {
+          this.#workerContent = (
+              function (msg) {
+                  try {
+                      const func = new Function("return " + msg.data.fun)();
+                      let result = func();
+                      postMessage({ result });
+                  } catch (error) {
+                      postMessage({ error: error.message });
+                  } finally {
+                      if (msg.data.close) self.close();
+                  }
+              }
+          ).toString();
+          this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
+          this.worker = new Worker(window.URL.createObjectURL(this.blob));
+      }
+      call(func, callback, close = true) {
+          this.worker.postMessage({
+              fun: func.toString(),
+              close
+          });
+          this.worker.onmessage = function (e) {
+              if (e.data.error) {
+                  console.error(e.data.error);
+              } else {
+                  callback(e.data.result);
+              }
+          };
+          return this;
+      }
+  }
+
+  const useThread = (func, callback , close) => {
+      const T = new ZikoUseThreed();
+      if (func) {
+          T.call(func, callback , close);
+      }
+      return T;
+  };
+
   [
       App,
       Math$1,