ziko 0.49.2 → 0.49.4

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Nov 25 2025 11:09:43 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
@@ -1181,17 +1181,143 @@ const __CACHE__ = {
     }
 };
 
+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__(){
@@ -1449,20 +1575,8 @@ function _register_to_class_(target, mixin) {
 
 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,
@@ -1470,7 +1584,7 @@ function useState(initialValue) {
             paused : false
     });
 
-    const current = store.get(index);
+    let current = store.get(index);
 
     function getValue() {
         return {
@@ -1482,10 +1596,13 @@ function useState(initialValue) {
 
     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);
         }
     }
 
@@ -4467,6 +4584,7 @@ const throttle=(fn,delay)=>{
     }
 };
 
+const sleep= ms => new Promise(res => setTimeout(res, ms));
 function timeout(ms, fn) {
   let id;
   const promise = new Promise((resolve) => {
@@ -4483,10 +4601,6 @@ function timeout(ms, fn) {
   };
 }
 
-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;
@@ -5096,55 +5210,6 @@ const useReactive = (nested_value) => mapfun$1(
     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() {
@@ -5261,75 +5326,6 @@ tags.p("Test useRoot ").style({
 
 */
 
-// 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) {

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Nov 25 2025 11:09:43 GMT+0100 (UTC+01:00)
+  Date : Tue Nov 25 2025 19:12:26 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);
             }
         }
 
@@ -4471,6 +4588,7 @@
         }
     };
 
+    const sleep= ms => new Promise(res => setTimeout(res, ms));
     function timeout(ms, fn) {
       let id;
       const promise = new Promise((resolve) => {
@@ -4487,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;
@@ -5100,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() {
@@ -5265,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) {