ziko 0.49.7 → 0.50.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.49.7",
+  "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/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/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

@@ -4,7 +4,7 @@ export * from './use-derived.js';
 export * from './use-reactive.js';
 
 //
-export * from './use-channel.js'
+export * from './use-ipc.js'
 export * from './use-storage.js'
 export * from './use-thread.js'
 export * from './use-event-emitter.js'

package/src/hooks/{use-channel.js → use-ipc.js}

@@ -1,6 +1,6 @@
 import { Random } from "../math/random/index.js";
 
-class UseChannel {
+class UseIPC {
     #channel;
     #eventData;
     #handlers;
@@ -81,5 +81,5 @@ class UseChannel {
     }
 }
 
-const useChannel = (name) => new UseChannel(name);
-export { useChannel };
+const useIPC = (name) => new UseIPC(name);
+export { useIPC };

package/src/hooks/use-storage.js

@@ -1,11 +1,11 @@
-import { useChannel } from "./use-channel.js";
+import { useIPC } from "./use-ipc.js";
 
 class UseStorage {
     constructor(storage, globalKey, initialValue, use_channel = true) {
         this.cache = {
             storage,
             globalKey,
-            channel: use_channel ? useChannel(`Ziko:useStorage-${globalKey}`) : null,
+            channel: use_channel ? useIPC(`Ziko:useStorage-${globalKey}`) : null,
             oldItemKeys: new Set()
         };
 

package/src/index.js

@@ -5,7 +5,7 @@ export * from "./data/index.js";
 // export * from "./reactivity/index.js"
 export * from "./app/index.js";
 export * from './hooks/index.js';
-export * from './use/index.js'
+// export * from './use/index.js'
 
 export * from "./events/index.js";
 

package/src/ui/__methods__/events.js

@@ -1,4 +1,4 @@
-import { Events } from "../../events/__Events__.js";
+import { EventsMap } from "../../events/events-map/index.js";
 import {
   bind_pointer_event,
   bind_mouse_event,
@@ -10,6 +10,8 @@ import {
   bind_wheel_event
 } from "../../events/binders/index.js";
 
+import { bind_custom_event } from "../../events/binders/custom-event.js";
+
 const binderMap = {
   ptr: bind_pointer_event,
   mouse : bind_mouse_event,
@@ -21,14 +23,26 @@ const binderMap = {
   wheel : bind_wheel_event
 };
 
-const EventsMethodes = {};
+const EventsMethodes = {
+  on(event_name,...callbacks){
+    if(!this.events.custom)this.events.custom = bind_custom_event(this);
+    this.events.custom.on(event_name,...callbacks);
+    return this;
+  },
+  emit(event_name,detail={}){
+    if(!this.events.custom)this.events.custom = bind_custom_event(this);
+    this.events.custom.emit(event_name,detail);
+    return this;
+  }
+};
 
-Object.entries(Events).forEach(([name, eventList]) => {
+Object.entries(EventsMap).forEach(([name, eventList]) => {
+  const lname = name.toLowerCase()
   eventList.forEach(event => {
     const methodName = `on${event}`;
     EventsMethodes[methodName] = function (...callbacks) {
-      if (!this.events[name]) this.events[name] = binderMap[name.toLowerCase()](this);
-      this.events[name][methodName](...callbacks);
+      if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
+      this.events[lname][methodName](...callbacks);
       return this;
     };
   });

package/src/ui/constructors/UIElement.js

@@ -8,13 +8,13 @@ import {
   StyleMethods
 } from "../__methods__/index.js";
 import { 
-  useCustomEvent,
+  // useCustomEvent,
   // useSwipeEvent,
   // watchIntersection, 
   // watchSize,
   // watchAttr,
   // watchChildren
-} from "../../reactivity/events/custom-event.js"
+} from "../../--reactivity-deprecated/events/custom-event.js"
 class UIElement extends UIElementCore{
   constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
     super()
@@ -28,6 +28,8 @@ class UIElement extends UIElementCore{
       IndexingMethods, 
       EventsMethodes
     );
+
+    // console.log(EventsMethodes)
     if(element)this.init(element, name, type, render)
   }
   get element(){
@@ -165,16 +167,16 @@ class UIElement extends UIElementCore{
   //   this.events.clipboard.onSelect(...callbacks);
   //   return this;
   // }
-  on(event_name,...callbacks){
-    if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    this.events.custom.on(event_name,...callbacks);
-    return this;
-  }
-  emit(event_name,detail={}){
-    if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    this.events.custom.emit(event_name,detail);
-    return this;
-  }
+  // on(event_name,...callbacks){
+  //   if(!this.events.custom)this.events.custom = useCustomEvent(this);
+  //   this.events.custom.on(event_name,...callbacks);
+  //   return this;
+  // }
+  // emit(event_name,detail={}){
+  //   if(!this.events.custom)this.events.custom = useCustomEvent(this);
+  //   this.events.custom.emit(event_name,detail);
+  //   return this;
+  // }
   // watchAttr(callback){
   //   if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
   //   return this;

package/src/ui/constructors/UIElementCore.js

@@ -1,6 +1,7 @@
 import {UINode} from "./UINode.js";
-import {__init__global__, UIStore} from '../../__ziko__/index.js';
-__init__global__()
+// import {__init__global__} from '../../__ziko__/index.js';
+import { UIStore } from "../../__ziko__/__ui__.js";
+// __init__global__()
 class UIElementCore extends UINode{
   constructor(){
     super()
@@ -87,139 +88,5 @@ class UIElementCore extends UINode{
   isUIElement(){
     return true;
   }
-//   get st(){
-//     return this.cache.style;
-//   }
-//   get attr(){
-//     return this.cache.attributes;
-//   }
-//   get evt(){
-//     return this.events;
-//   }
-//   get html(){
-//     return this.element.innerHTML;
-//   }
-//   get text(){
-//     return this.element.textContent;
-//   }
-//   get isBody(){
-//     return this.element === globalThis?.document.body;
-//   }
-//   get parent(){
-//     return this.cache.parent;
-//   }
-//   get width(){
-//     return this.element.getBoundingClientRect().width;
-//   }
-//   get height(){
-//     return this.element.getBoundingClientRect().height;
-//   }
-//   get top(){
-//     return this.element.getBoundingClientRect().top;
-//   }
-//   get right(){
-//     return this.element.getBoundingClientRect().right;
-//   }
-//   get bottom(){
-//     return this.element.getBoundingClientRect().bottom;
-//   }
-//   get left(){
-//     return this.element.getBoundingClientRect().left;
-//   }
-//   clone(render=false) {
-//     // UI.__proto__=this.__proto__;
-//     // if(this.items.length){
-//     //   const items = [...this.items].map(n=>n.clone());
-//     //   UI.append(...items);
-//     // }
-//     // else UI.element=this.element.cloneNode(true);
-//     // return UI.mount(render);
-//   }
-
-//   freeze(freeze){
-//     this.cache.isFrozzen=freeze;
-//     return this;
-//   }
-  // setTarget(tg) {
-  //   if(this.isBody) return ;
-  //   if (tg?.isUIElement) tg = tg.element;
-  //   this.unmount();
-  //   this.target = tg;
-  //   this.mount();
-  //   return this;
-  // }
-//   describe(label){
-//     if(label)this.setAttr("aria-label",label)
-//   }
-//   get children() {
-//     return [...this.element.children];
-//   }
-//   get cloneElement() {
-//     return this.element.cloneNode(true);
-//   }
-//   setClasses(...value) {
-//     this.setAttr("class", value.join(" "));
-//     return this;
-//   }
-//   get classes(){
-//     const classes=this.element.getAttribute("class");
-//     return classes===null?[]:classes.split(" ");
-//   }
-//   addClass() {
-//     /*this.setAttr("class", value);
-//         return this;*/
-//   }
-//   setId(id) {
-//     this.setAttr("id", id);
-//     return this;
-//   }
-//   get id() {
-//     return this.element.getAttribute("id");
-//   }
-//   onSwipe(width_threshold, height_threshold,...callbacks){
-//     if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
-//     this.events.swipe.onSwipe(...callbacks);
-//     return this;
-//   }
-  // To Fix
-  // onKeysDown({keys=[],callback}={}){
-  //   if(!this.events.key)this.events.key = useKeyEvent(this);
-  //   this.events.key.handleSuccessifKeys({keys,callback});
-  //   return this;
-  // }
-  // onSelect(...callbacks){
-  //   if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-  //   this.events.clipboard.onSelect(...callbacks);
-  //   return this;
-  // }
-//   on(event_name,...callbacks){
-//     if(!this.events.custom)this.events.custom = useCustomEvent(this);
-//     this.events.custom.on(event_name,...callbacks);
-//     return this;
-//   }
-//   emit(event_name,detail={}){
-//     if(!this.events.custom)this.events.custom = useCustomEvent(this);
-//     this.events.custom.emit(event_name,detail);
-//     return this;
-//   }
-//   watchAttr(callback){
-//     if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
-//     return this;
-//   }
-//   watchChildren(callback){
-//     if(!this.observer.children)this.observer.children = watchChildren(this,callback);
-//     return this;
-//   }
-//   watchSize(callback){
-//     if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
-//     this.observer.resize.start();
-//     return this;
-//   }
-//   watchIntersection(callback,config){
-//     if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
-//     this.observer.intersection.start();
-//     return this;
-//   }
-
 }
 export { UIElementCore }