ziko 0.49.5 → 0.49.7

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Wed Nov 26 2025 11:58:54 GMT+0100 (UTC+01:00)
+  Date : Sat Nov 29 2025 19:48:11 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
@@ -1184,132 +1184,180 @@
     };
 
     class UseChannel {
+        #channel;
+        #eventData;
+        #handlers;
+        #uuid;
+        #subscribers;
+        #currentRooms;
         constructor(name = "") {
-            this.channel = new BroadcastChannel(name);
-            this.eventData = new Map();
-            this.handlers = new Map();
-            this.uuid = "ziko-channel:" + Random.string(10);
-            this.subscribers = new Set([this.uuid]);
-
-            this.channel.addEventListener("message", (e) => {
-                const { last_sent_event, userId, eventData } = e.data;
-
-                // ignore own events
-                if (userId === this.uuid) return;
-
-                this.subscribers.add(userId);
-
-                // sync data
-                this.eventData = new Map(eventData);
-
-                const data = this.eventData.get(last_sent_event);
-                const handlers = this.handlers.get(last_sent_event);
-
-                if (handlers) {
-                    handlers.forEach(fn => fn(data));
-                }
+            this.#channel = new BroadcastChannel(name);
+            this.#eventData = new Map();
+            this.#handlers = new Map(); // Map<event, Array<{fn, rooms}>>
+            this.#uuid = "ziko-channel:" + Random.string(10);
+            this.#subscribers = new Set([this.#uuid]);
+            this.#currentRooms = new Set(); 
+            this.#channel.addEventListener("message", (e) => {
+                const { last_sent_event, userId, eventData, rooms } = e.data;
+                if (userId === this.#uuid) return; // ignore own messages
+                // broadcast if no rooms, else check intersection
+                if (rooms && rooms.length && !rooms.some(r => this.#currentRooms.has(r))) return;
+                this.#subscribers.add(userId);
+                this.#eventData = new Map(eventData);
+                const handlersList = this.#handlers.get(last_sent_event);
+                if (!handlersList) return;
+                handlersList.forEach(({ fn, rooms: handlerRooms }) => {
+                    // trigger if listener has no room filter, or intersects subscriber rooms
+                    if (!handlerRooms || handlerRooms.length === 0 ||
+                        !rooms || rooms.some(r => handlerRooms.includes(r))) {
+                        fn(this.#eventData.get(last_sent_event));
+                    }
+                });
             });
         }
 
-        emit(event, data) {
-            this.eventData.set(event, data);
-
-            this.channel.postMessage({
-                eventData: this.eventData,
+        emit(event, data, rooms) {
+            this.#eventData.set(event, data);
+            if(typeof rooms === 'string') rooms = [rooms];
+            this.#channel.postMessage({
+                eventData: Array.from(this.#eventData.entries()),
                 last_sent_event: event,
-                userId: this.uuid
+                userId: this.#uuid,
+                rooms: rooms && rooms.length ? rooms : undefined
             });
             return this;
         }
-
-        on(event, handler = console.log) {
-            if (!this.handlers.has(event)) {
-                this.handlers.set(event, []);
-            }
-            this.handlers.get(event).push(handler);
+        on(event, handler = console.log, rooms) {
+            if (!this.#handlers.has(event)) this.#handlers.set(event, []);
+            if(typeof rooms === 'string') rooms = [rooms];
+            this.#handlers.get(event).push({ fn: handler, rooms });
             return this;
         }
-
-        close() {
-            this.channel.close();
+        off(event, handler) {
+            if (!this.#handlers.has(event)) return this;
+            this.#handlers.set(
+                event,
+                this.#handlers.get(event).filter(h => h.fn !== handler)
+            );
             return this;
         }
-
-        get broadcast() {
+        once(event, handler, rooms) {
+            const wrapper = (data) => {
+                handler(data);
+                this.off(event, wrapper);
+            };
+            this.on(event, wrapper, rooms);
+            return this;
+        }
+        join(...rooms) {
+            rooms.forEach(r => this.#currentRooms.add(r));
+            return this;
+        }
+        leave(...rooms) {
+            if (!rooms.length) this.#currentRooms.clear();
+            else rooms.forEach(r => this.#currentRooms.delete(r));
+            return this;
+        }
+        close() {
+            this.#channel.close();
             return this;
         }
     }
 
     const useChannel = (name) => new UseChannel(name);
 
-    // To do : remove old items
-    class UseStorage{
-        constructor(storage, globalKey, initialValue){
-            this.cache={
+    class UseStorage {
+        constructor(storage, globalKey, initialValue, use_channel = true) {
+            this.cache = {
                 storage,
                 globalKey,
-                channel:useChannel(`Ziko:useStorage-${globalKey}`),
-                oldItemKeys:new Set()
+                channel: use_channel ? useChannel(`Ziko:useStorage-${globalKey}`) : null,
+                oldItemKeys: new Set()
             };
-            this.#init(initialValue);
-            this.#maintain();
+
+            this.#init(initialValue, use_channel);
         }
-        get items(){
-            return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
+
+        get items() {
+            const raw = this.cache.storage.getItem(this.cache.globalKey);
+            if (!raw) return {};
+            try {
+                return JSON.parse(raw);
+            } catch {
+                return {};
+            }
         }
+
         #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("")
+            const items = this.items;
+            this.cache.oldItemKeys.forEach(k => delete this[k]);
+            for (const key in items) {
+                this[key] = items[key];
+                this.cache.oldItemKeys.add(key);
+            }
+        }
+        #init(initialValue, use_channel) {
+            if (use_channel && this.cache.channel) this.cache.channel.on("Ziko-Storage-Updated", () => this.#maintain());
+            if (!initialValue) {
+                this.#maintain();
+                return;
             }
+            if (this.cache.storage.getItem(this.cache.globalKey)) {
+                const existing = this.items;
+                Object.keys(existing).forEach(k => this.cache.oldItemKeys.add(k));
+                this.#maintain();
+            } 
             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));
+
+        set(data) {
+            this.cache.storage.setItem(this.cache.globalKey, JSON.stringify(data));
+            if (this.cache.channel) this.cache.channel.emit("Ziko-Storage-Updated", data);
             this.#maintain();
-            return this
+            return this;
         }
-        add(data){
-            const db={
+
+        add(data) {
+            this.set({
                 ...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);
+        remove(...keys) {
+            const items = { ...this.items };
+            keys.forEach(key => {
+                delete items[key];
+                delete this[key];
+                this.cache.oldItemKeys.delete(key);
+            });
+            this.set(items);
             return this;
         }
-        get(key){
+        get(key) {
             return this.items[key];
         }
-        clear(){
+        clear() {
             this.cache.storage.removeItem(this.cache.globalKey);
+            this.cache.oldItemKeys.forEach(k => delete this[k]);
+            this.cache.oldItemKeys.clear();
             this.#maintain();
             return this;
         }
-
+        onStorageUpdated(callback) {
+            if (this.cache.channel) {
+                this.cache.channel.on("Ziko-Storage-Updated", callback);
+            }
+            return this;
+        }
     }
-    const useLocaleStorage=(key,initialValue)=>new UseStorage(localStorage,key,initialValue);
-    const useSessionStorage=(key,initialValue)=>new UseStorage(sessionStorage,key,initialValue);
+
+    // factory functions
+    const useLocaleStorage = (key, initialValue, use_channel = true) =>
+        new UseStorage(localStorage, key, initialValue, use_channel);
+
+    const useSessionStorage = (key, initialValue, use_channel = true) =>
+        new UseStorage(sessionStorage, key, initialValue, use_channel);
 
     const __State__ = {
         store : new Map(),
@@ -4761,76 +4809,79 @@
     };
 
     class UseEventEmitter {
-        constructor() {
-          this.events = {};
-          this.maxListeners = 10; 
+        constructor(maxListeners = 10) {
+            this.events = {};
+            this.maxListeners = maxListeners;
         }
+
         on(event, listener) {
-          if (!this.events[event]) {
-            this.events[event] = [];
-          }
-          this.events[event].push(listener);  
-          if (this.events[event].length > this.maxListeners) {
-            console.warn(`Warning: Possible memory leak. Event '${event}' has more than ${this.maxListeners} listeners.`);
-          }
+            if (!this.events[event]) this.events[event] = [];
+            this.events[event].push(listener);
+            if (this.events[event].length > this.maxListeners) {
+                console.warn(`Warning: Possible memory leak. Event '${event}' has more than ${this.maxListeners} listeners.`);
+            }
+            return this;
         }
+
         once(event, listener) {
-          const onceListener = (data) => {
-            this.off(event, onceListener); // Remove the listener after it's been called
-            listener(data);
-          };
-          this.on(event, onceListener);
+            const wrapper = (...args) => {
+                this.off(event, wrapper);
+                listener(...args);
+            };
+            return this.on(event, wrapper);
         }
-      
+
         off(event, listener) {
-          const listeners = this.events[event];
-          if (listeners) {
+            const listeners = this.events[event];
+            if (!listeners) return this;
+
             const index = listeners.indexOf(listener);
             if (index !== -1) {
-              listeners.splice(index, 1);
+                listeners.splice(index, 1);
             }
-          }
+
+            return this;
         }
-      
+
         emit(event, data) {
-          const listeners = this.events[event];
-          if (listeners) {
-            listeners.forEach(listener => {
-              listener(data);
+            const listeners = this.events[event];
+            if (!listeners) return false;
+
+            // Make a copy so removing listeners inside callbacks doesn't affect iteration
+            [...listeners].forEach(listener => {
+                try {
+                    listener(data);
+                } catch (e) {
+                    console.error(`Error in listener for '${event}':`, e);
+                }
             });
-          }
-        }
-      
-        clear(event) {
-          if (event) {
-            delete this.events[event];
-          } else {
-            this.events = {};
-          }
+
+            return true;
         }
-      
-        setMaxListener(event, max) {
-          this.maxListeners = max;
+        remove(event){
+            delete this.events[event];  
+            return this; 
         }
-      
-        removeAllListeners(event) {
-          if (event) {
-            this.events[event] = [];
-          } else {
+        clear() {
             this.events = {};
-          }
+            return this;
         }
-      }
 
-    const useEventEmitter=()=>new UseEventEmitter();
+        setMaxListeners(max) {
+            this.maxListeners = max;
+            return this;
+        }
+    }
+
+    const useEventEmitter = (maxListeners) => new UseEventEmitter(maxListeners);
 
     class ZikoUseFavIcon{
-        constructor(FavIcon,useEventEmitter=true){
+        constructor(FavIcon,withEmitter=true){
             this.#init();
             this.cache={
                 Emitter:null
             };
-            if(useEventEmitter)this.useEventEmitter();
+            if(withEmitter)this.useEventEmitter();
             this.set(FavIcon);
         }
         #init(){     
@@ -4859,7 +4910,7 @@
         }
 
     }
-    const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
+    const useFavIcon=(FavIcon,withEmitter)=>new ZikoUseFavIcon(FavIcon,withEmitter);
 
     class ZikoMeta{
         constructor({viewport,charset,description,author,keywords}){
@@ -4939,7 +4990,7 @@
             return this;
         }
     }
-    const useTitle=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
+    const useTitle$1=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
 
     // import {useLink} from "./";
     class ZikoHead{
@@ -4947,7 +4998,7 @@
             this.html = globalThis?.document?.documentElement;
             this.head = globalThis?.document?.head;
 
-            title && useTitle(title);
+            title && useTitle$1(title);
             lang && this.setLang(lang);
             icon && useFavIcon(icon);
             meta && useMeta(meta);
@@ -5184,7 +5235,7 @@
         const subscribers = new Set();
 
         sources.forEach(source => {
-            const srcValue = source(); // getValue()
+            const srcValue = source();
             srcValue._subscribe(() => {
                 {
                     const newVal = deriveFn(...sources.map(s => s().value));
@@ -5213,121 +5264,155 @@
         nested_value
     );
 
-    class UseThreed {
-        #workerContent;
+    class UseThread {
+        #worker;
+        #callbacks = new Map();
+        #idCounter = 0;
+
         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();
-                    }
+            const workerCode = `
+            this.onmessage = function(e) {
+                const { id, funStr, args, close } = e.data;
+                try {
+                    const func = new Function("return " + funStr)();
+                    const result = func(...args);
+                    postMessage({ id, result });
+                } catch (error) {
+                    postMessage({ id, error: error.message });
+                } finally {
+                    if (close) self.close();
                 }
-            ).toString();
-            this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-            this.worker = new Worker(window.URL.createObjectURL(this.blob));
+            }
+        `;
+            const blob = new Blob([workerCode], { type: "text/javascript" });
+            this.#worker = new Worker(URL.createObjectURL(blob));
+
+            this.#worker.addEventListener("message", (e) => {
+                const { id, result, error } = e.data;
+                const callback = this.#callbacks.get(id);
+                if (!callback) return;
+
+                callback(result, error);
+                this.#callbacks.delete(id);
+            });
         }
-        call(func, callback, close = true) {
-            this.worker.postMessage({
-                fun: func.toString(),
+        call(func, callback, args = [], close = true) {
+            if (typeof func !== "function") throw new TypeError("func must be a function");
+            const id = ++this.#idCounter;
+            this.#callbacks.set(id, callback);
+
+            this.#worker.postMessage({
+                id,
+                funStr: func.toString(),
+                args,
                 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 UseThreed();
-        if (func) {
-            T.call(func, callback , close);
+        terminate() {
+            this.#worker.terminate();
         }
-        return T;
-    };
+    }
 
-    class UseRoot {
-        constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
-            this.currentPropsMap = PropsMap;
-            this.namespace = namespace;
-            this.ValidateCssProps = ValidateCssProps;
-            // this.pairs = {};
-            // this.#maintain()
-            this.use(PropsMap);
-        }
-        use(PropsMap){
-            if(this.ValidateCssProps) ValidateCssProps(PropsMap);
-            this.currentPropsMap = PropsMap;
-            this.#maintain();
-            return this;
+    /*
+     [
+        {
+            query: '(min-width: 600px)',
+            callback: () => console.log(1)
+        },
+        {
+            query: '(max-width: 300px)',
+            callback: () => console.log(2)
         }
-        #maintain(){
-           const root = globalThis?.document?.documentElement?.style;
-           for(let prop in this.currentPropsMap){
-            const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`;
-               root.setProperty(
-                cssProp, 
-                this.currentPropsMap[prop]
-                ); 
-            //    Object.assign(this.pairs, {
-            //     [prop] : `var(--${this.namespace}-${prop})`
-            //    })
-               Object.defineProperty(this, prop, {
-                    value: `var(${cssProp})`,
-                    writable: true,
-                    configurable: true,
-                    enumerable: false 
-               });
-           }
+     ]
+    */
+
+    class UseMediaQuery {
+        #mediaQueryRules;
+        #fallback;
+        #lastCalledCallback = null;
+
+        constructor(mediaQueryRules = [], fallback = () => {}) {
+            this.#mediaQueryRules = mediaQueryRules;
+            this.#fallback = fallback;
+
+            this.#init();
         }
-    }
 
-    function ValidateCssProps(PropsMap){
-        const validProps = new Set(Object.keys(document.documentElement.style));
-        for (let key in PropsMap) {
-            if (!validProps.has(key)) {
-                throw new Error(`Invalid CSS property: "${key}"`);
-            }
+        // PRIVATE: check if ANY rule matches
+        #checkAllRules() {
+            return this.#mediaQueryRules.some(
+                ({ query }) => globalThis.matchMedia(query).matches
+            );
         }
-    }
 
-    const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new UseRoot(PropsMap, {namespace, register, ValidateCssProps});
+        // PRIVATE: installs listeners and initial checks
+        #init() {
+            this.#mediaQueryRules.forEach(({ query, callback }) => {
+                const mediaQueryList = globalThis.matchMedia(query);
 
-    // Usage 
+                const checkMatches = () => {
+                    const anyMatch = this.#checkAllRules();
 
-    /*
-    const Styles = {
-     S1 : {
-      background : 'white',
-      color : 'darkblue'
-      border : '2px darkblue solid"'
-     },
-     S2 : {
-      background : 'darkblue',
-      color : 'white'
-      border : '2px green solid"'
-     }
+                    if (mediaQueryList.matches) {
+                        callback();
+                        this.#lastCalledCallback = callback;
+                    } else if (!anyMatch && this.#lastCalledCallback !== this.#fallback) {
+                        this.#fallback();
+                        this.#lastCalledCallback = this.#fallback;
+                    }
+                };
+
+                checkMatches();
+                mediaQueryList.addEventListener("change", checkMatches);
+            });
+        }
     }
-    const {use, border, background, color} = useRoot(Style.S1)
 
-    tags.p("Test useRoot ").style({
-      border,
-      color,
-      background,
-      padding : '10px'
-    })
+    const useMediaQuery = (mediaQueryRules, fallback) =>
+        new UseMediaQuery(mediaQueryRules, fallback);
+
+    class UseTitle {
+        constructor(title = document.title, withEmitter = true) {
+            this.cache = {
+                emitter: null
+            };
 
-    */
+            if (withEmitter) this.useEventEmitter();
+            this.set(title);
+        }
+
+        useEventEmitter() {
+            this.cache.emitter = useEventEmitter();
+            return this;
+        }
+
+        setTitle(title) {
+            if (title !== document.title) {
+                document.title = title;
+
+                if (this.cache.emitter) {
+                    this.cache.emitter.emit("ziko:title-changed", title);
+                }
+            }
+            return this;
+        }
+
+        get current() {
+            return document.title;
+        }
+
+        onChange(callback) {
+            if (this.cache.emitter) {
+                this.cache.emitter.on("ziko:title-changed", callback);
+            }
+            return this;
+        }
+    }
+
+    const useTitle = (title, withEmitter = true) => new UseTitle(title, withEmitter);
 
     let {sqrt, cos, sin, exp, log, cosh, sinh} = Math;
     // Math.abs = new Proxy(Math.abs, {
@@ -5422,7 +5507,7 @@
     exports.UISVGWrapper = UISVGWrapper;
     exports.UISwitch = UISwitch;
     exports.UIView = UIView;
-    exports.UseRoot = UseRoot;
+    exports.UseThread = UseThread;
     exports.Utils = Utils;
     exports.View = View;
     exports.ZikoApp = ZikoApp;
@@ -5594,14 +5679,15 @@
     exports.timeTaken = timeTaken;
     exports.time_memory_Taken = time_memory_Taken;
     exports.timeout = timeout;
+    exports.useChannel = useChannel;
     exports.useDerived = useDerived;
     exports.useEventEmitter = useEventEmitter;
     exports.useLocaleStorage = useLocaleStorage;
+    exports.useMediaQuery = useMediaQuery;
     exports.useReactive = useReactive;
-    exports.useRoot = useRoot;
     exports.useSessionStorage = useSessionStorage;
     exports.useState = useState;
-    exports.useThread = useThread;
+    exports.useTitle = useTitle;
     exports.wait = wait;
     exports.waitForUIElm = waitForUIElm;
     exports.waitForUIElmSync = waitForUIElmSync;