ziko 0.49.1 → 0.49.3

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Nov 22 2025 13:34:29 GMT+0100 (UTC+01:00)
+  Date : Tue Nov 25 2025 19:11:53 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
@@ -1185,17 +1185,143 @@
         }
     };
 
+    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);
+
     const __State__ = {
         store : new Map(),
-        index : undefined?.data?.__Ziko__?.__State__?.index ?? 0,
+        index : 0,
+        session_storage : null,
         register: function(state){
-            console.log({
-                // hmr : import.meta.hot?.data.__Ziko__.__State__.index,
-                index : this.index
-            });
+            if(!undefined.SSR && undefined.DEV){
+                if(!this.session) this.session_storage = useSessionStorage('ziko-state', {});
+                const savedValue = this.session_storage.get(this.index);
+                if(!savedValue) this.session_storage.add({[this.index] : state.value});
+                else state.value = savedValue;
+            }
             this.store.set(this.index++, state);
-        }
-        
+        },
+        update: function(index, value){
+           if(!undefined.SSR && undefined.DEV){
+                this.session_storage.add({[index] : value});
+            } 
+        },
+
     };
 
     function __init__global__(){
@@ -1453,20 +1579,8 @@
 
     if(!globalThis.__Ziko__) __init__global__();
 
-        // HMR persistence
-    if (undefined?.data) {
-        undefined.data.__Ziko__ = undefined.data?.__Ziko__ || globalThis?.__Ziko__;
-        globalThis.__Ziko__ = undefined.data.__Ziko__;
-        // import.meta.hot.accept(n=>console.log(n));
-        // console.log(import.meta.hot.data.__Ziko__.__State__.store)
-    }
-
-
-
     function useState(initialValue) {
-
-        // console.log(import.meta.hot.data.__Ziko__.__State__.store.get(0))
-
+        
         const {store, index} = __Ziko__.__State__;
         __Ziko__.__State__.register({
                 value : initialValue,
@@ -1474,7 +1588,7 @@
                 paused : false
         });
 
-        const current = store.get(index);
+        let current = store.get(index);
 
         function getValue() {
             return {
@@ -1486,10 +1600,13 @@
 
         function setValue(newValue) {
             if (current.paused) return;
-            if (typeof newValue === "function") newValue = newValue(current.value);
+            if (typeof newValue === "function") {
+                newValue = newValue(current.value);
+            }
             if (newValue !== current.value) {
                 current.value = newValue;
                 current.subscribers.forEach(fn => fn(current.value));
+                __Ziko__.__State__.update(index, newValue);
             }
         }
 
@@ -2894,7 +3011,7 @@
     function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
         if (globalThis.customElements?.get(name)) {
             console.warn(`Custom element "${name}" is already defined`);
-            return; // skip redefinition
+            return;
         }
         if(name.search('-') === -1){
             console.warn(`"${name}" is not a valid custom element name`);
@@ -2918,19 +3035,21 @@
                 }
 
                 connectedCallback() {
-                    this.mount();
+                    this.render();
                 }
 
-                mount() {
+                render() {
                     this.shadowRoot.innerHTML = '';
-                    this.UIElement = UIElement(this.props).mount(this.shadowRoot);
+                    const item = UIElement(this.props);
+                    if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot)); 
+                    else item.mount(this.shadowRoot);
                 }
 
                 attributeChangedCallback(name, _, newValue) {
                     Object.assign(this.props, {
                         [name]: this.mask[name].type(newValue)
                     });
-                    this.mount();
+                    this.render();
                 }
             }
         );
@@ -4469,6 +4588,7 @@
         }
     };
 
+    const sleep= ms => new Promise(res => setTimeout(res, ms));
     function timeout(ms, fn) {
       let id;
       const promise = new Promise((resolve) => {
@@ -4485,10 +4605,6 @@
       };
     }
 
-    const sleep= ms => new Promise(res => setTimeout(res, ms));
-
-    // use it with await
-
     class TimeLoop {
       constructor(callback, { step = 1000, t0 = 0, t1 = Infinity, autoplay = true } = {}) {
         this.callback = callback;
@@ -5098,55 +5214,6 @@
         nested_value
     );
 
-    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);
-
     class ZikoUseThreed {
         #workerContent;
         constructor() {
@@ -5263,75 +5330,6 @@
 
     */
 
-    // 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);
-
     let {sqrt, cos, sin, exp, log, cosh, sinh} = Math;
     // Math.abs = new Proxy(Math.abs, {
     //   apply(target, thisArg, args) {