ziko 0.49.6 → 0.49.7

package/src/hooks/index.js

@@ -1,5 +1,13 @@
+// STATES
 export * from './use-state.js';
 export * from './use-derived.js';
 export * from './use-reactive.js';
+
+//
 export * from './use-channel.js'
-export * from './use-storage.js'
+export * from './use-storage.js'
+export * from './use-thread.js'
+export * from './use-event-emitter.js'
+export * from './use-media-query.js'
+export * from './use-title.js'
+export * from './use-root.js'

package/src/hooks/use-channel.js

@@ -1,36 +1,28 @@
 import { Random } from "../math/random/index.js";
 
 class UseChannel {
-    // private fields
     #channel;
     #eventData;
     #handlers;
     #uuid;
     #subscribers;
-    #currentRooms; // now a Set for multiple rooms
-
+    #currentRooms;
     constructor(name = "") {
         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(); // multiple rooms
-
+        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 ||
@@ -44,24 +36,20 @@ class UseChannel {
     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,
             rooms: rooms && rooms.length ? rooms : undefined
         });
-
         return this;
     }
-
     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;
     }
-
     off(event, handler) {
         if (!this.#handlers.has(event)) return this;
         this.#handlers.set(
@@ -70,7 +58,6 @@ class UseChannel {
         );
         return this;
     }
-
     once(event, handler, rooms) {
         const wrapper = (data) => {
             handler(data);
@@ -79,23 +66,19 @@ class UseChannel {
         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);

package/src/hooks/use-event-emitter.js

@@ -0,0 +1,68 @@
+class UseEventEmitter {
+    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.`);
+        }
+        return this;
+    }
+
+    once(event, listener) {
+        const wrapper = (...args) => {
+            this.off(event, wrapper);
+            listener(...args);
+        };
+        return this.on(event, wrapper);
+    }
+
+    off(event, listener) {
+        const listeners = this.events[event];
+        if (!listeners) return this;
+
+        const index = listeners.indexOf(listener);
+        if (index !== -1) {
+            listeners.splice(index, 1);
+        }
+
+        return this;
+    }
+
+    emit(event, 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);
+            }
+        });
+
+        return true;
+    }
+    remove(event){
+        delete this.events[event];  
+        return this; 
+    }
+    clear() {
+        this.events = {};
+        return this;
+    }
+
+    setMaxListeners(max) {
+        this.maxListeners = max;
+        return this;
+    }
+}
+
+const useEventEmitter = (maxListeners) => new UseEventEmitter(maxListeners);
+
+export { useEventEmitter };

package/src/hooks/use-favicon.js

@@ -0,0 +1,59 @@
+import { useEventEmitter } from "./use-event-emitter.js";
+
+class UseFavIcon {
+    constructor(FavIcon, withEmitter = true) {
+        this.#init();
+        this.cache = {
+            emitter: null
+        };
+        if (withEmitter) this.useEventEmitter();
+        if (FavIcon) this.set(FavIcon);
+    }
+
+    #init() {
+        let link = document.querySelector("link[rel*='icon']");
+        let created = false;
+
+        if (!link) {
+            link = document.createElement("link");
+            created = true;
+        }
+
+        link.type = "image/x-icon";
+        link.rel = "shortcut icon";
+
+        if (created) document.head.appendChild(link);
+
+        this.__FavIcon__ = link;
+    }
+
+    setFavicon(href) {
+        if (href !== this.__FavIcon__.href) {
+            this.__FavIcon__.href = href;
+
+            if (this.cache.emitter)
+                this.cache.emitter.emit("ziko:favicon-changed", href);
+        }
+        return this;
+    }
+
+    get current() {
+        return this.__FavIcon__.href;
+    }
+
+    onChange(callback) {
+        if (this.cache.emitter)
+            this.cache.emitter.on("ziko:favicon-changed", callback);
+        return this;
+    }
+
+    useEventEmitter() {
+        this.cache.emitter = useEventEmitter();
+        return this;
+    }
+    
+}
+
+const useFavIcon = (FavIcon, withEmitter = true) => new UseFavIcon(FavIcon, withEmitter);
+
+export { useFavIcon };

package/src/hooks/use-media-query.js

@@ -0,0 +1,59 @@
+/*
+ [
+    {
+        query: '(min-width: 600px)',
+        callback: () => console.log(1)
+    },
+    {
+        query: '(max-width: 300px)',
+        callback: () => console.log(2)
+    }
+ ]
+*/
+
+class UseMediaQuery {
+    #mediaQueryRules;
+    #fallback;
+    #lastCalledCallback = null;
+
+    constructor(mediaQueryRules = [], fallback = () => {}) {
+        this.#mediaQueryRules = mediaQueryRules;
+        this.#fallback = fallback;
+
+        this.#init();
+    }
+
+    // PRIVATE: check if ANY rule matches
+    #checkAllRules() {
+        return this.#mediaQueryRules.some(
+            ({ query }) => globalThis.matchMedia(query).matches
+        );
+    }
+
+    // PRIVATE: installs listeners and initial checks
+    #init() {
+        this.#mediaQueryRules.forEach(({ query, callback }) => {
+            const mediaQueryList = globalThis.matchMedia(query);
+
+            const checkMatches = () => {
+                const anyMatch = this.#checkAllRules();
+
+                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 useMediaQuery = (mediaQueryRules, fallback) =>
+    new UseMediaQuery(mediaQueryRules, fallback);
+
+export { useMediaQuery };

package/src/hooks/use-root.js

@@ -0,0 +1,73 @@
+class UseRoot {
+    constructor(PropsMap, { namespace = 'Ziko', ValidateCssProps = false } = {}) {
+        this.currentPropsMap = PropsMap;
+        this.namespace = namespace;
+        this.ValidateCssProps = ValidateCssProps;
+        this.use(PropsMap);
+    }
+
+    use(PropsMap) {
+        if (this.ValidateCssProps) ValidateCssPropsFn(PropsMap);
+        this.currentPropsMap = PropsMap;
+        this.#maintain();
+        return this;
+    }
+
+    #maintain() {
+        const root = globalThis?.document?.documentElement?.style;
+        for (const prop in this.currentPropsMap) {
+            const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`;
+            root.setProperty(cssProp, this.currentPropsMap[prop]);
+
+            Object.defineProperty(this, prop, {
+                value: `var(${cssProp})`,
+                writable: true,
+                configurable: true,
+                enumerable: false
+            });
+        }
+    }
+}
+
+function ValidateCssPropsFn(PropsMap) {
+    const validProps = new Set(Object.keys(document.documentElement.style));
+    for (const key in PropsMap) {
+        if (!validProps.has(key)) {
+            throw new Error(`Invalid CSS property: "${key}"`);
+        }
+    }
+}
+
+const useRoot = (PropsMap, options = {}) => new UseRoot(PropsMap, options);
+
+export { 
+    UseRoot, 
+    useRoot
+};
+
+
+// Usage 
+
+/*
+const Styles = {
+ S1 : {
+  background : 'white',
+  color : 'darkblue'
+  border : '2px darkblue solid"'
+ },
+ S2 : {
+  background : 'darkblue',
+  color : 'white'
+  border : '2px green solid"'
+ }
+}
+const {use, border, background, color} = useRoot(Style.S1)
+
+tags.p("Test useRoot ").style({
+  border,
+  color,
+  background,
+  padding : '10px'
+})
+
+*/

package/src/hooks/use-storage.js

@@ -1,73 +1,99 @@
-// To do : remove old items
 import { useChannel } from "./use-channel.js";
-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()
-        }
-        this.#init(initialValue);
-        this.#maintain();
+            channel: use_channel ? useChannel(`Ziko:useStorage-${globalKey}`) : null,
+            oldItemKeys: new Set()
+        };
+
+        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] });
+        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){
-        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("")
+    #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);
-export{
+
+// 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);
+
+export {
     useLocaleStorage,
     useSessionStorage
-}
+};

package/src/hooks/use-thread.js

@@ -0,0 +1,55 @@
+class UseThread {
+    #worker;
+    #callbacks = new Map();
+    #idCounter = 0;
+
+    constructor() {
+        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();
+                }
+            }
+        `;
+        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, 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
+        });
+
+        return this;
+    }
+
+    terminate() {
+        this.#worker.terminate();
+    }
+}
+
+const useThread = (func, callback, args = [], close = true) => new UseThread().call(func, callback, args, close);
+
+export { UseThread, useThread };

package/src/hooks/use-title.js

@@ -0,0 +1,43 @@
+import { useEventEmitter } from "./use-event-emitter.js";
+
+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);
+
+export { useTitle };

package/src/reactivity/hooks/head/useFavIcon.js

@@ -1,11 +1,11 @@
-import { useEventEmitter } from "../../../use/use-event-emmiter.js";
+import { useEventEmitter } from "../../../hooks/use-event-emitter.js";
 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(){     
@@ -34,5 +34,5 @@ class ZikoUseFavIcon{
     }
 
 }
-const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
+const useFavIcon=(FavIcon,withEmitter)=>new ZikoUseFavIcon(FavIcon,withEmitter);
 export{ useFavIcon }

package/src/reactivity/hooks/head/useTitle.js

@@ -1,4 +1,4 @@
-import { useEventEmitter } from "../../../use/use-event-emmiter.js";
+import { useEventEmitter } from "../../../hooks/use-event-emitter.js";
 class ZikoUseTitle{
     constructor(title=document.title,useEventEmitter=true){
         this.cache={

package/src/use/index.js

@@ -1,5 +1,5 @@
 // export * from './use-channel.js';
-export * from './use-event-emmiter.js';
+// export * from './use-event-emmiter.js';
 export * from './use-thread.js';
 
 export * from './use-root.js';

package/src/use/{use-event-emmiter.js → use-event-emmiter.js.txt}

@@ -1,7 +1,7 @@
 class UseEventEmitter {
-    constructor() {
+    constructor(maxListeners = 10) {
       this.events = {};
-      this.maxListeners = 10; 
+      this.maxListeners = maxListeners; 
     }
     on(event, listener) {
       if (!this.events[event]) {
@@ -60,5 +60,5 @@ class UseEventEmitter {
     }
   }
 
-const useEventEmitter=()=>new UseEventEmitter()
+const useEventEmitter=(maxListeners)=>new UseEventEmitter(maxListeners)
 export{useEventEmitter}

package/types/hooks/index.d.ts

@@ -1,4 +1,11 @@
 export type * from './use-channel.d.ts'
+export type * from './use-storage.d.ts'
 export type * from './use-state.d.ts'
 export type * from './use-derived.d.ts'
-export type * from './use-reactive.d.ts'
+export type * from './use-reactive.d.ts'
+export type * from './use-Thread.d.ts'
+export type * from './use-event-emitter.d.ts'
+export type * from './use-media-query.d.ts'
+export type * from './use-title.d.ts'
+export type * from './use-favicon.d.ts'
+export type * from './use-root.d.ts'