ziko 0.49.6 → 0.50.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.49.6",
+  "version": "0.50.1",
   "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",
@@ -25,6 +25,9 @@
     "LICENCE"
   ],
   "exports": {
+    "./src/*": {
+      "import" : "./src/*"
+    },
     "./*": {
       "types" : "./types/*/index.d.ts",
       "import" : "./src/*/index.js"

package/src/{reactivity → --reactivity-deprecated}/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 → --reactivity-deprecated}/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/{reactivity → --reactivity-deprecated}/hooks/index.js

@@ -1,8 +1,8 @@
-export * from "./contexte"
+// export * from "./contexte"
 // export * from "./decorators"
-export * from "./head"
+// export * from "./head"
 // export * from "./interactions"
 // export * from "./sensors"
 // export * from "./storage"
-export * from "./UI"
+// export * from "./UI"
 // export * from "./window"

package/src/{reactivity → --reactivity-deprecated}/index.js

@@ -1,3 +1,3 @@
 export * from "./events";
 export * from "./observer";
-export * from "./hooks";
+// export * from "./hooks";

package/src/{use → --use-deprecated}/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-deprecated/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/src/__ziko__/__state__.js

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

package/src/app/ziko-app.js

@@ -1,4 +1,4 @@
-import { ZikoHead , useHead} from "../reactivity/hooks/head/index.js";
+// import { ZikoHead , useHead} from "../reactivity/hooks/head/index.js";
 class ZikoApp {
     constructor({head = null, wrapper = null, target = null}){
         this.head = head;
@@ -25,11 +25,11 @@ class ZikoApp {
         else if(typeof wrapper === "function") this.wrapper = wrapper();
         return this;
     }
-    setHead(head){
-        if(head instanceof ZikoHead) this.head = head;
-        else this.head = useHead(head);
-        return this;  
-    }
+    // setHead(head){
+    //     if(head instanceof ZikoHead) this.head = head;
+    //     else this.head = useHead(head);
+    //     return this;  
+    // }
     
 }
 const App = ({head, wrapper, target}) => new ZikoApp({head, wrapper, target})

package/src/events/binders/custom-event.js

@@ -1,5 +1,5 @@
-import { __ZikoEvent__ } from "../__ZikoEvent__.js";
-class ZikoEventCustom extends __ZikoEvent__{
+import { ZikoEvent } from "../ziko-event.js";
+class ZikoCustomEvent extends ZikoEvent{
     constructor(target, events, customizer){
         super(target, events, details_setter, customizer)
     }
@@ -7,8 +7,12 @@ class ZikoEventCustom extends __ZikoEvent__{
         super._register_events(events, null, null, false);
         return this;
     }
-    emit(event_name, details = {}){
-        const event=new Event(event_name);
+    emit(event_name, detail = {}){
+        const event = new CustomEvent(event_name, {
+            detail,
+            bubbles: true,
+            cancelable: true
+        });
         this.targetElement.dispatchEvent(event);
         return this;
     }
@@ -21,9 +25,9 @@ class ZikoEventCustom extends __ZikoEvent__{
 function details_setter(){
 
 }
-const bindCustomEvent = (target, events, customizer) => new ZikoEventCustom(target, events, customizer)
+const bind_custom_event = (target, events, customizer) => new ZikoCustomEvent(target, events, customizer)
 
 export{
-    bindCustomEvent,
-    ZikoEventCustom
+    bind_custom_event,
+    ZikoCustomEvent
 }

package/src/events/binders/index.js

@@ -1,16 +1,72 @@
-export * from "./click.js";
-export * from "./clipboard.js";
-export * from "./custom-event.js";
-export * from "./drag.js";
-export * from "./focus.js";
-export * from "./hash.js";
-export * from "./key.js";
-export * from "./mouse.js";
-export * from "./pointer.js";
-export * from "./touch.js";
-export * from "./wheel.js";
+import { ZikoEvent } from "../ziko-event.js";
+import { EventsMap } from "../events-map/index.js";
+import {
+    ptr_details_setter,
+    key_details_setter
+} from '../details-setter/index.js'
+import { register_click_away_event } from "../custom-events-registry/click-away.js";
 
+export const bind_click_event = (target, customizer) => {
+    register_click_away_event(target.element)
+    return new ZikoEvent(
+        target,
+        EventsMap.Click,
+        null,
+        customizer
+    );
+}
+export const bind_clipboard_event = (target, customizer) => new ZikoEvent(
+    target,
+    EventsMap.Clipboard,
+    null,
+    customizer
+);
+export const bind_drag_event = (target, customizer) => new ZikoEvent(
+    target,
+    EventsMap.Drag,
+    null,
+    customizer
+);
+export const bind_focus_event = (target, customizer) => new ZikoEvent(
+    target,
+    EventsMap.Focus,
+    null,
+    customizer
+);
+export const bind_key_event = (target, customizer) => new ZikoEvent(
+    target,
+    EventsMap.Key, 
+    key_details_setter, 
+    customizer
+);
+export const bind_mouse_event = (target, customizer) => new ZikoEvent(
+    target,
+    EventsMap.Mouse,
+    null,
+    customizer
+);
+export const bind_pointer_event = (target, customizer) => new ZikoEvent(
+    target,
+    EventsMap.Ptr, 
+    ptr_details_setter, 
+    customizer
+);
+export const bind_touch_event = (target, customizer) => new ZikoEvent(
+    target,
+    EventsMap.Touch,
+    null,
+    customizer
+);
+export const bind_wheel_event = (target, customizer) => new ZikoEvent(
+    target,
+    EventsMap.Wheel,
+    null,
+    customizer
+);
 
 
-
-export * from './custom-event.js'
+// function details_setter(){
+//     if(this.currentEvent==="click") this.dx = 0
+//     else this.dx = 1
+//     // console.log(this.currentEvent)
+// }

package/src/events/details-setter/index.js

@@ -0,0 +1,2 @@
+export * from './key.js'
+export * from './pointer.js'

package/src/events/details-setter/key.js

@@ -0,0 +1,14 @@
+export function key_details_setter(){
+    switch(this.currentEvent){
+        case "keydown" : {
+            this.kd = this.event.key
+        }; break;
+        case "keypress" : {
+            this.kp = this.event.key
+        }; break;
+        case "keyup" : {
+            this.ku = this.event.key
+        }; break;
+
+    }
+}

package/src/events/{binders → details-setter}/pointer.js

@@ -1,12 +1,4 @@
-import { __ZikoEvent__ } from "../__ZikoEvent__.js";
-import { Events } from "../__Events__.js";
-class ZikoEventPointer extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Ptr, details_setter, customizer);
-        this.isDown = false;
-    }
-}
-function details_setter(){
+export function ptr_details_setter(){
     switch(this.currentEvent){
         case "pointerdown" : {
             this.dx = parseInt(this.event.offsetX);
@@ -38,10 +30,4 @@ function details_setter(){
     // if(this.currentEvent==="click") this.dx = 0
     // else this.dx = 1
     // console.log(this.currentEvent)
-}
-const bind_pointer_event = (target, customizer) => new ZikoEventPointer(target, customizer)
-
-export{
-    bind_pointer_event,
-    ZikoEventPointer
 }

package/src/events/{__Events__.js → events-map/index.js}

@@ -1,4 +1,8 @@
-const Events = {
+const EventsMap = {
+    'Custom' : [
+        'emit',
+        'on'
+    ],
     'Click' : [
         'Click',
         'DblClick',
@@ -54,5 +58,5 @@ const Events = {
 }
 
 export {
-    Events
-}
+    EventsMap
+}

package/src/events/index.js

@@ -1,3 +1,3 @@
 export * from './binders/index.js'
-export * from "./__ZikoEvent__.js";
+export * from "./ziko-event.js"
 export * from "./utils.js";

package/src/events/types/__Shared__.d.ts

@@ -1,4 +1,4 @@
-export type EventCustomizer = ((this: __ZikoEvent__) => void) | ((ctx: __ZikoEvent__) => void);
+export type EventCustomizer = ((this: ZikoEvent) => void) | ((ctx: ZikoEvent) => void);
 
 export type EventMethodesBinder<
   EventKeys extends string,
@@ -30,11 +30,11 @@ export interface ZikoEventCache {
   __controllers__: Record<string, (e: Event) => void>;
 }
 
-export declare class __ZikoEvent__ {
+export declare class ZikoEvent {
   constructor(
     target: any,
     Events: string[],
-    details_setter?: (this: __ZikoEvent__) => void,
+    details_setter?: (this: ZikoEvent) => void,
     customizer?: EventCustomizer
   );
 

package/src/events/types/clipboard.d.ts

@@ -1,8 +1,8 @@
-import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { ZikoEvent } from "../ziko-event.js";
 import type { Callback, ClipboardEventKeys } from './__Shared__.js';
 import { UIElement } from "../../ui/index.js";
 
-declare class ZikoEventClipboard extends __ZikoEvent__ {
+declare class ZikoEventClipboard extends ZikoEvent {
   constructor(target: any, customizer?: Function);
 
   // Explicitly declare the dynamic methods to get editor support

package/src/events/types/focus.d.ts

@@ -1,8 +1,8 @@
-import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { ZikoEvent } from "../ziko-event.js";
 import type { Callback } from './__Shared__.js';
 import { UIElement } from "../../ui/index.js";
 
-declare class ZikoEventFocus extends __ZikoEvent__ {
+declare class ZikoEventFocus extends ZikoEvent {
   constructor(target: any, customizer?: Function);
 
   // Explicitly declare the dynamic methods to get editor support

package/src/events/types/pointer.d.ts

@@ -1,10 +1,10 @@
-import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { ZikoEvent } from "../ziko-event.js";
 import type { EventMethodesBinder, Callback, PointerEventKeys } from './__Shared__.js';
 import { UIElement } from "../../ui/index.js";
 
 type PointerEventMethodesBinder = EventMethodesBinder<PointerEventKeys, ZikoEventPointer>;
 
-declare class ZikoEventPointer extends __ZikoEvent__ implements PointerEventMethodesBinder {
+declare class ZikoEventPointer extends ZikoEvent implements PointerEventMethodesBinder {
   constructor(target: any, customizer?: Function);
 
   isDown: boolean;

package/src/events/{__ZikoEvent__.js → ziko-event.js}

@@ -1,19 +1,5 @@
 import { getEvent } from "./utils.js"
-function event_controller(e, event_name, details_setter, customizer, push_object){
-    this.cache.currentEvent = event_name;
-    this.cache.event = e;
-    details_setter?.call(this);
-    customizer?.hasOwnProperty("prototype") ? customizer?.call(this) : customizer?.call(null, this);
-    // if(customizer?.hasOwnProperty("prototype")) customizer?.call(this)
-    // else customizer?.call(null, this)
-    if(this.cache.preventDefault[event_name]) e.preventDefault();
-    if(this.cache.stopPropagation[event_name]) e.stopPropagation();
-    if(this.cache.stopImmediatePropagation[event_name]) e.stopImmediatePropagation();
-    
-    if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
-    this.cache.callbacks[event_name]?.map(n=>n(this));
-}
-class __ZikoEvent__ {
+class ZikoEvent {
     constructor(target = null, Events = [], details_setter, customizer){
         this.target = target;
         this.cache = {
@@ -159,7 +145,22 @@ class __ZikoEvent__ {
     }
 }
 
+function event_controller(e, event_name, details_setter, customizer, push_object){
+    this.cache.currentEvent = event_name;
+    this.cache.event = e;
+    details_setter?.call(this);
+    customizer?.hasOwnProperty("prototype") ? customizer?.call(this) : customizer?.call(null, this);
+    // if(customizer?.hasOwnProperty("prototype")) customizer?.call(this)
+    // else customizer?.call(null, this)
+    if(this.cache.preventDefault[event_name]) e.preventDefault();
+    if(this.cache.stopPropagation[event_name]) e.stopPropagation();
+    if(this.cache.stopImmediatePropagation[event_name]) e.stopImmediatePropagation();
+    
+    if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
+    this.cache.callbacks[event_name]?.map(n=>n(this));
+}
+
 export {
-    __ZikoEvent__,
+    ZikoEvent,
     getEvent
 }

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-ipc.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-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-channel.js → use-ipc.js}

@@ -1,36 +1,28 @@
 import { Random } from "../math/random/index.js";
 
-class UseChannel {
-    // private fields
+class UseIPC {
     #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,24 +66,20 @@ 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);
-export { useChannel };
+const useIPC = (name) => new UseIPC(name);
+export { useIPC };