ziko 0.49.2 → 0.49.3

package/dist/ziko.mjs

@@ -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
@@ -1179,17 +1179,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 : import.meta.hot?.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(!import.meta.env.SSR && import.meta.env.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(!import.meta.env.SSR && import.meta.env.DEV){
+            this.session_storage.add({[index] : value});
+        } 
+    },
+
 };
 
 function __init__global__(){
@@ -1447,20 +1573,8 @@ function _register_to_class_(target, mixin) {
 
 if(!globalThis.__Ziko__) __init__global__();
 
-    // HMR persistence
-if (import.meta.hot?.data) {
-    import.meta.hot.data.__Ziko__ = import.meta.hot.data?.__Ziko__ || globalThis?.__Ziko__;
-    globalThis.__Ziko__ = import.meta.hot.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,
@@ -1468,7 +1582,7 @@ function useState(initialValue) {
             paused : false
     });
 
-    const current = store.get(index);
+    let current = store.get(index);
 
     function getValue() {
         return {
@@ -1480,10 +1594,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);
         }
     }
 
@@ -4465,6 +4582,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) => {
@@ -4481,10 +4599,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;
@@ -5094,55 +5208,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() {
@@ -5259,75 +5324,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.49.2",
+  "version": "0.49.3",
   "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",

package/src/__ziko__/__state__.js

@@ -1,12 +1,21 @@
+import { useSessionStorage } from '../use/use-storage'
 export const __State__ = {
     store : new Map(),
-    index : import.meta.hot?.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(!import.meta.env.SSR && import.meta.env.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(!import.meta.env.SSR && import.meta.env.DEV){
+            this.session_storage.add({[index] : value})
+        } 
+    },
+
 }

package/src/hooks/use-state.js

@@ -1,20 +1,9 @@
 import { __init__global__ } from "../__ziko__/index.js";
-if(!globalThis.__Ziko__) __init__global__()
-
-    // HMR persistence
-if (import.meta.hot?.data) {
-    import.meta.hot.data.__Ziko__ = import.meta.hot.data?.__Ziko__ || globalThis?.__Ziko__;
-    globalThis.__Ziko__ = import.meta.hot.data.__Ziko__;
-    // import.meta.hot.accept(n=>console.log(n));
-    // console.log(import.meta.hot.data.__Ziko__.__State__.store)
-}
-
 
+if(!globalThis.__Ziko__) __init__global__()
 
 export function useState(initialValue) {
-
-    // console.log(import.meta.hot.data.__Ziko__.__State__.store.get(0))
-
+    
     const {store, index} = __Ziko__.__State__
     __Ziko__.__State__.register({
             value : initialValue,
@@ -22,7 +11,7 @@ export function useState(initialValue) {
             paused : false
     })
 
-    const current = store.get(index);
+    let current = store.get(index);
 
     function getValue() {
         return {
@@ -34,10 +23,13 @@ export 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)
         }
     }
 

package/src/use/use-storage.js

@@ -23,10 +23,10 @@ class ZikoUseStorage{
         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("")
+            // 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);
     }