ziko 0.49.4 → 0.49.6

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Nov 25 2025 19:12:26 GMT+0100 (UTC+01:00)
+  Date : Wed Nov 26 2025 12:01:55 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
@@ -42,8 +42,6 @@ Fixed = new Proxy(Fixed, {
     }
 });
 
-class ZikoMath {}
-
 // To generalise
 
 const mapfun$1=(fun,...X)=>{
@@ -1179,57 +1177,108 @@ 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
+class UseChannel {
+    // private fields
+    #channel;
+    #eventData;
+    #handlers;
+    #uuid;
+    #subscribers;
+    #currentRooms; // now a Set for multiple rooms
+
+    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.#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, 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;
     }
-    emit(event, data){
-        this.EVENTS_DATAS_PAIRS.set(event,data);
-        this.#maintainEmit(event);
+
+    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;
     }
-    on(event,handler=console.log){
-        this.EVENTS_HANDLERS_PAIRS.set(event,handler);
-        this.#maintainOn();
+
+    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;
     }
-    #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
-        });
+
+    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();
+
+    close() {
+        this.#channel.close();
         return this;
     }
+
 }
-const useChannel = name => new ZikoUseChannel(name);
+
+const useChannel = (name) => new UseChannel(name);
 
 // To do : remove old items
-class ZikoUseStorage{
+class UseStorage{
     constructor(storage, globalKey, initialValue){
         this.cache={
             storage,
@@ -1294,8 +1343,8 @@ class ZikoUseStorage{
     }
 
 }
-const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
-const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
+const useLocaleStorage=(key,initialValue)=>new UseStorage(localStorage,key,initialValue);
+const useSessionStorage=(key,initialValue)=>new UseStorage(sessionStorage,key,initialValue);
 
 const __State__ = {
     store : new Map(),
@@ -3225,9 +3274,8 @@ function trimKeys(obj) {
     }, Array.isArray(obj) ? [] : {});
 }
 
-class Matrix extends ZikoMath{
+class Matrix{
     constructor(rows, cols, element = [] ) {
-        super();
         if(rows instanceof Matrix){
             this.arr=rows.arr;
             this.rows=rows.rows;
@@ -3892,9 +3940,8 @@ const matrix2=(...element)=>new Matrix(2, 2, element);
 const matrix3=(...element)=>new Matrix(3, 3, element);
 const matrix4=(...element)=>new Matrix(4, 4, element);
 
-class Complex extends ZikoMath{
+class Complex{
     constructor(a = 0, b = 0) {
-        super();
         if(a instanceof Complex){
             this.a=a.a;
             this.b=a.b;
@@ -4070,12 +4117,6 @@ const complex=(a,b)=>{
     return new Complex(a,b)
 };
 
-// import { 
-//     gamma,
-//     bessel,
-//     beta 
-// } from "../calculus/index.js";
-
 const abs=(...x)=>mapfun$1(Math.abs,...x);
 const sqrt$2=(...x)=>mapfun$1(Math.sqrt,...x);
 const pow$1=(x,n)=>{
@@ -4754,7 +4795,7 @@ const timeTaken = callback => {
     return r;
 };
 
-class ZikoUseEventEmitter {
+class UseEventEmitter {
     constructor() {
       this.events = {};
       this.maxListeners = 10; 
@@ -4816,7 +4857,7 @@ class ZikoUseEventEmitter {
     }
   }
 
-const useEventEmitter=()=>new ZikoUseEventEmitter();
+const useEventEmitter=()=>new UseEventEmitter();
 
 class ZikoUseFavIcon{
     constructor(FavIcon,useEventEmitter=true){
@@ -5199,7 +5240,6 @@ function useDerived(deriveFn, sources) {
 const useReactive = (nested_value) => mapfun$1(
     n => {
         const state = useState(n);
-        // console.log(state)
         return {
             get : state[0],
             set : state[1],
@@ -5208,7 +5248,7 @@ const useReactive = (nested_value) => mapfun$1(
     nested_value
 );
 
-class ZikoUseThreed {
+class UseThreed {
     #workerContent;
     constructor() {
         this.#workerContent = (
@@ -5244,14 +5284,14 @@ class ZikoUseThreed {
 }
 
 const useThread = (func, callback , close) => {
-    const T = new ZikoUseThreed();
+    const T = new UseThreed();
     if (func) {
         T.call(func, callback , close);
     }
     return T;
 };
 
-class ZikoUseRoot {
+class UseRoot {
     constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
         this.currentPropsMap = PropsMap;
         this.namespace = namespace;
@@ -5296,7 +5336,7 @@ function ValidateCssProps(PropsMap){
     }
 }
 
-const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new ZikoUseRoot(PropsMap, {namespace, register, ValidateCssProps});
+const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new UseRoot(PropsMap, {namespace, register, ValidateCssProps});
 
 // Usage 
 
@@ -5387,4 +5427,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Base, Clock, Combinaison, Complex, E, EPSILON, FileBasedRouting, Flex, HTMLWrapper, Logic$1 as Logic, Matrix, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, Utils, View, ZikoApp, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventHash, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventTouch, ZikoEventWheel, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arc, arr2str, asin, asinh, atan, atan2, atanh, back, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, e, elastic, fact, floor, geomspace, getEvent, hypot, inRange, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useDerived, useEventEmitter, useLocaleStorage, useReactive, useRoot, useSessionStorage, useState, useThread, wait, waitForUIElm, waitForUIElmSync, zeros };
+export { App, Base, Clock, Combinaison, Complex, E, EPSILON, FileBasedRouting, Flex, HTMLWrapper, Logic$1 as Logic, Matrix, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, Utils, View, ZikoApp, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventHash, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventTouch, ZikoEventWheel, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arc, arr2str, asin, asinh, atan, atan2, atanh, back, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, e, elastic, fact, floor, geomspace, getEvent, hypot, inRange, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useDerived, useEventEmitter, useLocaleStorage, useReactive, useRoot, useSessionStorage, useState, useThread, wait, waitForUIElm, waitForUIElmSync, zeros };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.49.4",
+  "version": "0.49.6",
   "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",
@@ -48,6 +48,7 @@
       "import": "./src/use/index.js"
     },
     "./hooks": {
+      "types": "./types/hooks/index.d.ts",
       "import": "./src/hooks/index.js"
     },
     "./ui": {

package/src/__ziko__/__state__.js

@@ -1,4 +1,4 @@
-import { useSessionStorage } from '../use/use-storage'
+import { useSessionStorage } from '../hooks/use-storage.js'
 export const __State__ = {
     store : new Map(),
     index : 0,

package/src/hooks/index.js

@@ -1,3 +1,5 @@
 export * from './use-state.js';
 export * from './use-derived.js';
-export * from './use-reactive.js';
+export * from './use-reactive.js';
+export * from './use-channel.js'
+export * from './use-storage.js'

package/src/hooks/use-channel.js

@@ -0,0 +1,102 @@
+import { Random } from "../math/random/index.js";
+
+class UseChannel {
+    // private fields
+    #channel;
+    #eventData;
+    #handlers;
+    #uuid;
+    #subscribers;
+    #currentRooms; // now a Set for multiple rooms
+
+    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.#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, 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(
+            event,
+            this.#handlers.get(event).filter(h => h.fn !== handler)
+        );
+        return this;
+    }
+
+    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);
+export { useChannel };

package/src/hooks/use-derived.js

@@ -4,7 +4,7 @@ export function useDerived(deriveFn, sources) {
     let paused = false;
 
     sources.forEach(source => {
-        const srcValue = source(); // getValue()
+        const srcValue = source();
         srcValue._subscribe(() => {
             if (!paused) {
                 const newVal = deriveFn(...sources.map(s => s().value));

package/src/hooks/use-reactive.js

@@ -1,10 +1,9 @@
-import {mapfun} from '../math'
+import { mapfun } from '../math/index.js'
 import { useState } from './use-state.js'
 
 const useReactive = (nested_value) => mapfun(
     n => {
         const state = useState(n)
-        // console.log(state)
         return {
             get : state[0],
             set : state[1],

package/src/{use → hooks}/use-storage.js

@@ -1,6 +1,6 @@
 // To do : remove old items
 import { useChannel } from "./use-channel.js";
-class ZikoUseStorage{
+class UseStorage{
     constructor(storage, globalKey, initialValue){
         this.cache={
             storage,
@@ -65,8 +65,8 @@ class ZikoUseStorage{
     }
 
 }
-const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
-const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
+const useLocaleStorage=(key,initialValue)=>new UseStorage(localStorage,key,initialValue);
+const useSessionStorage=(key,initialValue)=>new UseStorage(sessionStorage,key,initialValue);
 export{
     useLocaleStorage,
     useSessionStorage

package/src/math/complex/index.js

@@ -1,4 +1,3 @@
-import ZikoMath from "../absract.js";
 import{
     cos,
     sin,
@@ -15,9 +14,8 @@ import{
   }from "../functions/index.js"
 import { Matrix } from "../matrix/index.js";
 import {sum,prod,deg2rad} from "../utils/index.js";
-class Complex extends ZikoMath{
+class Complex{
     constructor(a = 0, b = 0) {
-        super()
         if(a instanceof Complex){
             this.a=a.a;
             this.b=a.b;

package/src/math/matrix/Matrix.js

@@ -1,4 +1,3 @@
-import ZikoMath from "../absract.js";
 import{
     pow,
     min,
@@ -8,9 +7,8 @@ import {Utils} from "../utils/index.js";
 import {Complex } from "../complex/index.js";
 import {Random} from "../random/index.js"
 import { arr2str } from "../../data/index.js";
-class Matrix extends ZikoMath{
+class Matrix{
     constructor(rows, cols, element = [] ) {
-        super()
         if(rows instanceof Matrix){
             this.arr=rows.arr;
             this.rows=rows.rows;

package/src/reactivity/hooks/UI/useMediaQuery.js

@@ -10,7 +10,7 @@
             }
         ]
 */
-class ZikoUseMediaQuery {
+class UseMediaQuery {
     constructor(mediaQueryRules=[],fallback=()=>{}) {
         this.mediaQueryRules = mediaQueryRules;
         this.fallback = fallback;
@@ -37,7 +37,7 @@ class ZikoUseMediaQuery {
     }
 }
 
-const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
+const useMediaQuery = (mediaQueryRules,fallback) => new UseMediaQuery(mediaQueryRules,fallback);
 export {
     useMediaQuery
 };

package/src/reactivity/hooks/UI/useStyle.js

@@ -1,4 +1,4 @@
-class ZikoUseStyle {
+class UseStyle {
   constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
     this.id = "Ziko-Style-" + id;
     this.keys = new Set();
@@ -72,8 +72,8 @@ class ZikoUseStyle {
   }
 }
 
-const useStyle = (styles, use, id) => new ZikoUseStyle(styles, use, id)
+const useStyle = (styles, use, id) => new UseStyle(styles, use, id)
 export { 
   useStyle,
-  ZikoUseStyle
+  UseStyle
  };

package/src/reactivity/hooks/UI/useTheme.js

@@ -1,5 +1,5 @@
 import { Themes } from "../../../global/themes";
-class ZikoUseTheme{
+class UseTheme{
     constructor(theme,id=0){
       this.id="Ziko-Theme-"+id;
       this.use(theme)
@@ -53,7 +53,7 @@ class ZikoUseTheme{
       return this;
     }
   }  
-  const useTheme=(theme, id=0)=>new ZikoUseTheme(theme,id)
+  const useTheme=(theme, id=0)=>new UseTheme(theme,id)
   export {
       useTheme,
       // Themes,

package/src/use/index.js

@@ -1,4 +1,4 @@
-export * from './use-channel.js';
+// export * from './use-channel.js';
 export * from './use-event-emmiter.js';
 export * from './use-thread.js';
 
@@ -8,4 +8,4 @@ export * from './use-favicon.js'
 // export * from './use-link.js'
 // export * from 'use-meta.js'
 
-export * from './use-storage.js'
+// export * from './use-storage.js'

package/src/use/use-channel.js.txt

@@ -0,0 +1,61 @@
+import { Random } from "../math/random/index.js";
+
+class UseChannel {
+    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));
+            }
+        });
+    }
+
+    emit(event, data) {
+        this.eventData.set(event, data);
+
+        this.channel.postMessage({
+            eventData: this.eventData,
+            last_sent_event: event,
+            userId: this.uuid
+        });
+        return this;
+    }
+
+    on(event, handler = console.log) {
+        if (!this.handlers.has(event)) {
+            this.handlers.set(event, []);
+        }
+        this.handlers.get(event).push(handler);
+        return this;
+    }
+
+    close() {
+        this.channel.close();
+        return this;
+    }
+
+    get broadcast() {
+        return this;
+    }
+}
+
+const useChannel = (name) => new UseChannel(name);
+export { useChannel };

package/src/use/use-event-emmiter.js

@@ -1,4 +1,4 @@
-class ZikoUseEventEmitter {
+class UseEventEmitter {
     constructor() {
       this.events = {};
       this.maxListeners = 10; 
@@ -60,5 +60,5 @@ class ZikoUseEventEmitter {
     }
   }
 
-const useEventEmitter=()=>new ZikoUseEventEmitter()
+const useEventEmitter=()=>new UseEventEmitter()
 export{useEventEmitter}

package/src/use/use-root.js

@@ -1,4 +1,4 @@
-class ZikoUseRoot {
+class UseRoot {
     constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
         this.currentPropsMap = PropsMap;
         this.namespace = namespace;
@@ -43,10 +43,10 @@ function ValidateCssProps(PropsMap){
     }
 }
 
-const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new ZikoUseRoot(PropsMap, {namespace, register, ValidateCssProps});
+const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new UseRoot(PropsMap, {namespace, register, ValidateCssProps});
 
 export{
-    ZikoUseRoot,
+    UseRoot,
     useRoot
 }