ziko 0.49.5 → 0.49.7

package/dist/ziko.cjs

@@ -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
@@ -1180,132 +1180,180 @@ const __CACHE__ = {
 };
 
 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(),
@@ -4757,76 +4805,79 @@ const timeTaken = callback => {
 };
 
 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(){     
@@ -4855,7 +4906,7 @@ class ZikoUseFavIcon{
     }
 
 }
-const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
+const useFavIcon=(FavIcon,withEmitter)=>new ZikoUseFavIcon(FavIcon,withEmitter);
 
 class ZikoMeta{
     constructor({viewport,charset,description,author,keywords}){
@@ -4935,7 +4986,7 @@ class ZikoUseTitle{
         return this;
     }
 }
-const useTitle=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
+const useTitle$1=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
 
 // import {useLink} from "./";
 class ZikoHead{
@@ -4943,7 +4994,7 @@ class ZikoHead{
         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);
@@ -5180,7 +5231,7 @@ function useDerived(deriveFn, sources) {
     const subscribers = new Set();
 
     sources.forEach(source => {
-        const srcValue = source(); // getValue()
+        const srcValue = source();
         srcValue._subscribe(() => {
             {
                 const newVal = deriveFn(...sources.map(s => s().value));
@@ -5209,121 +5260,155 @@ const useReactive = (nested_value) => mapfun$1(
     nested_value
 );
 
-class UseThreed {
-    #workerContent;
+class UseThread {
+    #worker;
+    #callbacks = new Map();
+    #idCounter = 0;
+
     constructor() {
-        this.#workerContent = (
-            function (msg) {
+        const workerCode = `
+            this.onmessage = function(e) {
+                const { id, funStr, args, close } = e.data;
                 try {
-                    const func = new Function("return " + msg.data.fun)();
-                    let result = func();
-                    postMessage({ result });
+                    const func = new Function("return " + funStr)();
+                    const result = func(...args);
+                    postMessage({ id, result });
                 } catch (error) {
-                    postMessage({ error: error.message });
+                    postMessage({ id, error: error.message });
                 } finally {
-                    if (msg.data.close) self.close();
+                    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, {
@@ -5418,7 +5503,7 @@ exports.UINode = UINode;
 exports.UISVGWrapper = UISVGWrapper;
 exports.UISwitch = UISwitch;
 exports.UIView = UIView;
-exports.UseRoot = UseRoot;
+exports.UseThread = UseThread;
 exports.Utils = Utils;
 exports.View = View;
 exports.ZikoApp = ZikoApp;
@@ -5590,14 +5675,15 @@ exports.tick = tick;
 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;