ziko 0.49.7 → 0.50.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.49.7",
+  "version": "0.50.2",
   "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/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/__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/data/api/fetchdom.js

@@ -1,14 +1,30 @@
-import { preload } from "./preload"
+import { preload } from "./preload";
 
-async function fetchdom(url='https://github.com/zakarialaoui10'){
-  const data=await fetch(url)
-  const html=await data.text()
-  const dom= new DOMParser().parseFromString(html,'text/xml')
-  return dom.documentElement
+async function fetchdom(url='https://github.com/zakarialaoui10') {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const html = await response.text();
+    const dom = new DOMParser().parseFromString(html, 'text/html');
+    return dom.documentElement;
+  } catch (err) {
+    console.error('Failed to fetch DOM:', err);
+    throw err;
+  }
 }
-function fetchdomSync(url='https://github.com/zakarialaoui10'){
-  const data=preload(url);
-  const dom= new DOMParser().parseFromString(data,'text/xml')
-  return dom.documentElement;
+
+function fetchdomSync(url='https://github.com/zakarialaoui10') {
+  try {
+    const data = preload(url);
+    const dom = new DOMParser().parseFromString(data, 'text/html');
+    return dom.documentElement;
+  } catch (err) {
+    console.error('Failed to fetch DOM synchronously:', err);
+    throw err;
+  }
 }
-export {fetchdom,fetchdomSync}
+
+export { 
+  fetchdom, 
+  fetchdomSync 
+};

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

@@ -1,14 +1,18 @@
-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)
+        super('custom', target, events, details_setter, customizer)
     }
     _register_events(events){
         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,100 @@
-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,
+    register_view_event,
+    register_swipe_event
+} from "../custom-events-registry/index.js";
 
+export const bind_click_event = (target, customizer) => {
+    register_click_away_event(target.element)
+    return new ZikoEvent(
+        'click',
+        target,
+        EventsMap.Click,
+        null,
+        customizer
+    );
+}
+export const bind_clipboard_event = (target, customizer) => new ZikoEvent(
+    'clipboard',
+    target,
+    EventsMap.Clipboard,
+    null,
+    customizer
+);
+export const bind_drag_event = (target, customizer) => new ZikoEvent(
+    'drag',
+    target,
+    EventsMap.Drag,
+    null,
+    customizer
+);
+export const bind_focus_event = (target, customizer) => new ZikoEvent(
+    'focus',
+    target,
+    EventsMap.Focus,
+    null,
+    customizer
+);
+export const bind_key_event = (target, customizer) => new ZikoEvent(
+    'key',
+    target,
+    EventsMap.Key, 
+    key_details_setter, 
+    customizer
+);
+export const bind_mouse_event = (target, customizer) => new ZikoEvent(
+    'mouse',
+    target,
+    EventsMap.Mouse,
+    null,
+    customizer
+);
+export const bind_pointer_event = (target, customizer) => new ZikoEvent(
+    'ptr',
+    target,
+    EventsMap.Ptr, 
+    ptr_details_setter, 
+    customizer
+);
+export const bind_touch_event = (target, customizer) => new ZikoEvent(
+    'touch',
+    target,
+    EventsMap.Touch,
+    null,
+    customizer
+);
+export const bind_wheel_event = (target, customizer) => new ZikoEvent(
+    'wheel',
+    target,
+    EventsMap.Wheel,
+    null,
+    customizer
+);
 
+export const bind_view_event = (target, customizer) => {
+    register_view_event(target.element)
+    return new ZikoEvent(
+        'view',
+        target, 
+        EventsMap.View,
+        null, 
+        customizer
+    )
+}
 
-
-export * from './custom-event.js'
+export const bind_swipe_event = (target, customizer) => {
+    register_swipe_event(target.element)
+    return new ZikoEvent(
+        'swipe',
+        target, 
+        EventsMap.Swipe,
+        null, 
+        customizer
+    )
+}

package/src/events/custom-events-registry/index.js

@@ -0,0 +1,3 @@
+export * from './click-away.js'
+export * from './view.js'
+export * from './swipe.js'

package/src/events/custom-events-registry/swipe.js

@@ -0,0 +1,76 @@
+class SwipeEvent extends CustomEvent {
+  constructor(type, detail) {
+    super(type, {
+      detail,
+      bubbles: true,
+      cancelable: true
+    });
+  }
+}
+
+function register_swipe_event(
+  element,
+  threshold = 50,
+  restraint = 100,
+  allowedTime = 500
+) {
+  let startX = 0,
+      startY = 0,
+      startTime = 0,
+      isPointerDown = false;
+
+  function onPointerDown(e) {
+    startX = e.clientX;
+    startY = e.clientY;
+    startTime = performance.now();
+    isPointerDown = true;
+  }
+
+  function onPointerUp(e) {
+    if (!isPointerDown) return;
+    isPointerDown = false;
+
+    const distX = e.clientX - startX;
+    const distY = e.clientY - startY;
+    const elapsed = performance.now() - startTime;
+
+    let direction = null;
+    let eventName = null;
+
+    if (elapsed <= allowedTime) {
+      if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
+        direction = distX < 0 ? "left" : "right";
+        eventName = "swipe" + direction;
+      } 
+      else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
+        direction = distY < 0 ? "up" : "down";
+        eventName = "swipe" + direction;
+      }
+    }
+
+    // Emit event
+    if (eventName) {
+      element.dispatchEvent(
+        new SwipeEvent(eventName, {
+          direction,
+          distX,
+          distY,
+          originalEvent: e
+        })
+      );
+    }
+  }
+
+  element.addEventListener("pointerdown", onPointerDown, { passive: true });
+  element.addEventListener("pointerup", onPointerUp, { passive: true });
+
+  return () => {
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.removeEventListener("pointerup", onPointerUp);
+  };
+}
+
+export {
+  SwipeEvent,
+  register_swipe_event
+};

package/src/events/custom-events-registry/view.js

@@ -0,0 +1,74 @@
+import { throttle } from "../../time/decorators/index.js";
+class ViewEvent extends CustomEvent {
+    constructor(type, detail, { bubbles = true, cancelable = true } = {}) {
+        super(type, { detail, bubbles, cancelable });
+    }
+}
+
+function register_view_event(
+    element,
+    {
+        intersection = true,
+        resize = true,
+        threshold = 0,
+        throttleResize = 100,
+        throttleEnterExit = 0
+    } = {}
+) {
+    let intersectionObserver, resizeObserver;
+    const resizeCallback = entries => {
+        for (let entry of entries) {
+            const { width, height } = entry.contentRect;
+
+            element.dispatchEvent(
+                new ViewEvent("resizeview", {
+                    width,
+                    height,
+                    entry
+                })
+            );
+        }
+    };
+
+    const throttledResize = throttleResize > 0
+        ? throttle(resizeCallback, throttleResize)
+        : resizeCallback;
+
+    const intersectionCallback = entries => {
+        for (let entry of entries) {
+            const type = entry.isIntersecting ? "enterview" : "exitview";
+            element.dispatchEvent(new ViewEvent(type, entry));
+        }
+    };
+
+    const throttledIntersections = throttleEnterExit > 0
+        ? throttle(intersectionCallback, throttleEnterExit)
+        : intersectionCallback;
+
+    if (intersection) {
+        intersectionObserver = new IntersectionObserver(throttledIntersections, { threshold });
+        intersectionObserver.observe(element);
+    }
+
+    if (resize) {
+        resizeObserver = new ResizeObserver(throttledResize);
+        resizeObserver.observe(element);
+    }
+
+    // ---- UNREGISTER ----
+    return () => {
+        if (intersectionObserver) {
+            intersectionObserver.unobserve(element);
+            intersectionObserver.disconnect();
+        }
+        if (resizeObserver) {
+            resizeObserver.unobserve(element);
+            resizeObserver.disconnect();
+        }
+    };
+}
+
+export {
+    ViewEvent,
+    register_view_event
+};

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,4 @@
-const Events = {
+const EventsMap = {
     'Click' : [
         'Click',
         'DblClick',
@@ -44,15 +44,27 @@ const Events = {
     ],
     'Wheel': [
         'Wheel'
-    ]
+    ],
     // 'Media':[
 
     // ],
     // 'Hash':[
     //     "HashChange"
     // ]
+
+    'View':[
+        'EnterView',
+        'ExitView',
+        'ResizeView'
+    ],
+    'Swipe':[
+        'SwipeLeft',
+        'SwipeUp',
+        'SwipeRight',
+        'SwipeDown'
+    ]
 }
 
 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/utils.js

@@ -1,3 +1,34 @@
+export function event_controller(e, event_name, details_setter, customizer) {
+    this.cache.currentEvent = event_name;
+    this.cache.event = e;
+
+    details_setter?.call(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();
+
+    // Call the single callback if it exists
+    this.cache.callbacks[event_name]?.(this);
+}
+
+export function toggle_event_listener(method, ...events) {
+    const keys = events.length === 0
+        ? Object.keys(this.cache.paused) 
+        : events;
+    keys.forEach(key => {
+        if (!this.cache.paused.hasOwnProperty(key)) return;
+        this.targetElement?.[method](
+            key,
+            this.cache.__controllers__[key],
+            this.cache.options[key]
+        );
+        this.cache.paused[key] = method === 'removeEventListener';
+    });
+    return this;
+}
 const getEvent=(event = "")=>{
     if(event.startsWith("Ptr"))return `pointer${event.split("Ptr")[1].toLowerCase()}`;
     return event.toLowerCase()