ziko 0.49.7 → 0.50.2

package/src/events/ziko-event.js

@@ -0,0 +1,108 @@
+import { 
+    getEvent,
+    event_controller,
+    toggle_event_listener
+} from './utils.js'
+class ZikoEvent {
+    constructor(signature, target = null, Events = [], details_setter, customizer){
+        this.target = target;
+        this.cache = {
+            signature,
+            currentEvent : null,
+            event: null,
+            options : {},
+            preventDefault : {},
+            stopPropagation : {},
+            stopImmediatePropagation : {},
+            paused : {},
+            callbacks : {},
+            __controllers__:{}
+        }
+        if (Events) this._register_events(Events, details_setter, customizer);
+    }
+    _register_events(Events, details_setter, customizer, REGISTER_METHODES = true) {
+        const events = Events?.map(n => getEvent(n));
+        events?.forEach((event, i) => {
+            this.cache.preventDefault[event] = false;
+            this.cache.options[event] = {};
+            this.cache.paused[event] = false;
+            this.cache.__controllers__[event] = (e) =>
+                event_controller.call(this, e, event, details_setter, customizer);
+            if (REGISTER_METHODES) {
+                this[`on${Events[i]}`] = (callback) =>
+                    this.__onEvent(event, this.cache.options[event], {}, callback);
+            }
+        });
+        return this;
+    }
+    __onEvent(event, options, dispose, callback) {
+        if (!callback) return this;
+        this.cache.callbacks[event] = callback;
+        this.__handle(event, this.cache.__controllers__[event], options, dispose);
+        return this;
+    }
+    get targetElement(){
+        return this.target?.element;
+    }
+    get isParent(){
+        return this.target?.element === this.event?.srcElement;
+    }
+    get item(){
+        return this.target.find(n => n.element == this.event?.srcElement)?.[0];
+    }
+    get currentEvent(){
+        return this.cache.currentEvent;
+    }
+    get event(){
+        return this.cache.event;
+    }
+    get detail(){
+        return this.cache.event.detail
+    }
+    setTarget(UI){
+        this.target = UI;
+        return this;
+    }
+    __handle(event, handler, options){
+        this.targetElement?.addEventListener(event, handler, options);
+        return this;
+    }
+    #override(method, ...events) {
+        const keys = events.length === 0 ? Object.keys(this.cache[method]) : events
+        keys.forEach(e => {
+            if (this.cache[method].hasOwnProperty(e)) this.cache[method][e] = true;
+        });
+        return this;
+    }
+    preventDefault(...events) {
+        return this.#override('preventDefault', ...events);
+    }
+    stopPropagation(...events) {
+        return this.#override('stopPropagation', ...events);
+    }
+    stopImmediatePropagation(...events) {
+        return this.#override('stopImmediatePropagation', ...events);
+    }
+    setEventOptions(event, options){
+        const evt = getEvent(event);
+        this.pause();
+        Object.assign(this.cache.options[evt], options);
+        this.resume();
+        return this;
+    }
+    pause(...events) {
+        return toggle_event_listener.call(this, 'removeEventListener', ...events)
+    }
+    resume(...events) {
+        return toggle_event_listener.call(this, 'addEventListener', ...events);
+    }
+    dispose(){
+        this.pause();
+        this.target.events[this.cache.signature] = null
+        return this;
+    }
+}
+export {
+    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__/dom.js

@@ -35,18 +35,6 @@ export function clear(){
   this.element.innerHTML = "";
   return this;
 }
-export function mount(target = this.target) {
-  if(this.isBody)return ;
-  if(target?.isUIElement)target=target.element;
-  this.target=target;
-  this.target?.appendChild(this.element);
-  return this;
-}
-export function unmount(){
-  if(this.cache.parent)this.cache.parent.remove(this);
-  else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
-  return this;
-}
 export function replaceElementWith(new_element){
     this.cache.element.replaceWith(new_element)
     this.cache.element = new_element;
@@ -54,14 +42,6 @@ export function replaceElementWith(new_element){
     // To do : Dispose Events and States 
     return this
 }
-export function renderAfter(t = 1) {
-  setTimeout(() => this.mount(), t);
-  return this;
-}
-export function unrenderAfter(t = 1) {
-  setTimeout(() => this.unmount(), t);
-  return this;
-}
 export function after(ui){
   if(ui?.isUIElement) ui=ui.element;
   this.element?.after(ui)

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,
@@ -7,9 +7,13 @@ import {
   bind_drag_event,
   bind_clipboard_event,
   bind_focus_event,
-  bind_wheel_event
+  bind_wheel_event,
+  bind_view_event,
+  bind_swipe_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,
@@ -18,17 +22,31 @@ const binderMap = {
   drag : bind_drag_event,
   clipboard : bind_clipboard_event,
   focus : bind_focus_event,
-  wheel : bind_wheel_event
+  wheel : bind_wheel_event,
+  view : bind_view_event,
+  swipe : bind_swipe_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);
+    EventsMethodes[methodName] = function (callbacks) {
+      if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
+      this.events[lname][methodName](callbacks);
       return this;
     };
   });

package/src/ui/__methods__/index.js

@@ -1,3 +1,6 @@
+export * from './lifecycle.js'
+export * as LifecycleMethods from './lifecycle.js'
+
 export * from './attrs.js'
 export * as AttrsMethods from './attrs.js'
 

package/src/ui/__methods__/lifecycle.js

@@ -0,0 +1,54 @@
+// export function mount(target = this.target) {
+//   if(this.isBody) return ;
+//   if(target?.isUIElement)target=target.element;
+//   this.target=target;
+//   this.target?.appendChild(this.element);
+//   return this;
+// }
+// export function unmount(){
+//   if(this.cache.parent)this.cache.parent.remove(this);
+//   else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
+//   return this;
+// }
+
+// export function mountAfter(target = this.target, t = 1) {
+//   setTimeout(() => this.mount(), t);
+//   return this;
+// }
+// export function unmountAfter(t = 1) {
+//   setTimeout(() => this.unmount(), t);
+//   return this;
+// }
+
+export function mount(target = this.target, delay = 0) {
+    if (delay > 0) {
+        setTimeout(() => this.mount(target, 0), delay);
+        return this;
+    }
+
+    if (this.isBody) return this;
+
+    if (target?.isUIElement) target = target.element;
+    this.target = target;
+
+    this.target?.appendChild(this.element);
+    return this;
+}
+
+export function unmount(delay = 0) {
+    if (delay > 0) {
+        setTimeout(() => this.unmount(0), delay);
+        return this;
+    }
+
+    if (this.cache.parent) {
+        this.cache.parent.remove(this);
+    } else if (
+        this.target?.children?.length &&
+        [...this.target.children].includes(this.element)
+    ) {
+        this.target.removeChild(this.element);
+    }
+
+    return this;
+}

package/src/ui/constructors/UIElement.js

@@ -1,6 +1,7 @@
 import { UIElementCore } from "./UIElementCore.js";
 import { register_to_class } from "../../__helpers__/register/register-to-class.js";
 import { 
+  LifecycleMethods,
   AttrsMethods,
   DomMethods,
   IndexingMethods,
@@ -8,13 +9,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()
@@ -22,12 +23,15 @@ class UIElement extends UIElementCore{
     // console.log(this)
     register_to_class(
       this, 
+      LifecycleMethods,
       AttrsMethods, 
       DomMethods, 
       StyleMethods,
       IndexingMethods, 
       EventsMethodes
     );
+
+    // console.log(EventsMethodes)
     if(element)this.init(element, name, type, render)
   }
   get element(){
@@ -149,32 +153,12 @@ class UIElement extends UIElementCore{
   // 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;
@@ -183,16 +167,8 @@ class UIElement extends UIElementCore{
   //   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;
-  // }
+  // watchSize(callback)Remplaced By on onViewResize
+  // watchIntersection(callback,config) Remplaced By onViewEnter and onViewExit
 
 }
 export { UIElement }

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 }

package/src/ui/{constructors/UIElement-lite.js → mini/UIElement.js}

@@ -1,4 +1,4 @@
-import { UIElementCore } from "./UIElementCore.js";
+import { UIElementCore } from "../constructors/UIElementCore.js";
 class UIElement extends UIElementCore{
     constructor({element, name, type, render}){
         super({element, name, type, render})

package/src/ui/suspense/index.js

@@ -1,4 +1,4 @@
-import {UIElement} from "../constructors/UIElement-lite.js";
+import {UIElement} from "../mini/UIElement.js";
 class ZikoUISuspense extends UIElement{
     constructor(fallback_ui, callback){
         super({element : "div", name : "suspense"})
@@ -12,7 +12,6 @@ class ZikoUISuspense extends UIElement{
                 const ui = await callback()
                 fallback_ui.unmount()
                 this.append(ui)
-                // console.log(content)
             }
             catch(error){
                 console.log({error})

package/types/data/api/index.d.ts

@@ -0,0 +1,15 @@
+// fetchdom.d.ts
+
+/**
+ * Fetches a URL and parses it into a DOM Document asynchronously.
+ * @param url The URL to fetch. Defaults to 'https://github.com/zakarialaoui10'.
+ * @returns A Promise resolving to the root element of the parsed DOM.
+ */
+export function fetchdom(url?: string): Promise<Element>;
+
+/**
+ * Fetches a URL synchronously (using `preload`) and parses it into a DOM Document.
+ * @param url The URL to fetch. Defaults to 'https://github.com/zakarialaoui10'.
+ * @returns The root element of the parsed DOM.
+ */
+export function fetchdomSync(url?: string): Element;

package/types/data/index.d.ts

@@ -0,0 +1 @@
+export type * from './api/index.d.ts'

package/types/data/string/checkers.d.ts

@@ -0,0 +1,51 @@
+// stringUtils.d.ts
+
+/**
+ * Checks if a string is in camelCase.
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string is camelCase, false otherwise.
+ */
+export function is_camelcase(text?: string): boolean;
+
+/**
+ * Checks if a string contains hyphens (hyphen-case).
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string contains hyphens, false otherwise.
+ */
+export function is_hyphencase(text?: string): boolean;
+
+/**
+ * Checks if a string contains underscores (snake_case).
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string contains underscores, false otherwise.
+ */
+export function is_snakeCase(text?: string): boolean;
+
+/**
+ * Checks if a string is in PascalCase.
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string is PascalCase, false otherwise.
+ */
+export function is_pascalcalse(text?: string): boolean;
+
+/**
+ * Checks if a string is a palindrome (case-insensitive).
+ * @param text The string to check.
+ * @returns True if the string is a palindrome, false otherwise.
+ */
+export function is_palindrome(text: string): boolean;
+
+/**
+ * Checks if two words are anagrams of each other.
+ * @param word The first word.
+ * @param words The second word.
+ * @returns True if the words are anagrams, false otherwise.
+ */
+export function is_anagram(word: string, words: string): boolean;
+
+/**
+ * Checks if a string is an isogram (no repeating letters, case-insensitive).
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string is an isogram, false otherwise.
+ */
+export function is_isogram(text?: string): boolean;