ziko 0.49.1 → 0.49.3

package/dist/ziko.cjs

@@ -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
@@ -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);
         }
     }
 
@@ -2890,7 +3007,7 @@ const SVGWrapper = (content) => new UISVGWrapper(content);
 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`);
@@ -2914,19 +3031,21 @@ function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
             }
 
             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();
             }
         }
     );
@@ -4465,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) => {
@@ -4481,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;
@@ -5094,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() {
@@ -5259,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) {