ziko 0.33.0 → 0.34.0

package/src/ui/elements/ZikoUIElement.js

@@ -1,18 +1,10 @@
 import { compose } from "../../__helpers__/index.js";
 import { DomMethods } from "../methods/dom.js";
 import { IndexingMethods } from "../methods/indexing.js";
+import { EventsMethodes } from "../methods/events.js";
 import { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
 import { ZikoUIElementStyle } from "../style/index.js";
 import { 
-  usePointerEvent,
-  useMouseEvent, 
-  useWheelEvent,
-  useKeyEvent, 
-  useDragEvent , 
-  useDropEvent, 
-  useClickEvent , 
-  useClipboardEvent ,
-  useFocusEvent,
   useCustomEvent,
   useSwipeEvent,
   watchIntersection, 
@@ -22,7 +14,6 @@ import {
 } from "../../reactivity/index.js"
 import { Random } from "../../math/index.js";
 import { Str } from "../../data/index.js";
-// import { text } from "./text/text.js";
 class ZikoUIElement {
   constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
@@ -40,8 +31,14 @@ class ZikoUIElement {
     compose(
       this, 
       DomMethods,
-      IndexingMethods
+      IndexingMethods,
+      EventsMethodes
     )
+    // if(false){
+    //   import("../methods/tree.js").then(({ default: ExternalMethods }) => {
+    //     compose(this, ExternalMethods);
+    //   });
+    // }
     this.cache = {
       name,
       parent:null,
@@ -85,7 +82,7 @@ class ZikoUIElement {
      });
     this.items = [];
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-    element && globalThis.__Ziko__.__Config__.default.render && this.render()
+    element && globalThis.__Ziko__.__Config__.default.render && this?.render?.()
     if(
       // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
       // && 
@@ -327,161 +324,22 @@ class ZikoUIElement {
   get id() {
     return this.element.getAttribute("id");
   }
-  onPtrMove(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onMove(...callbacks);
-    return this;
-  }
-  onPtrDown(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onDown(...callbacks);
-    return this;
-  }
-  onPtrUp(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onUp(...callbacks);
-    return this;
-  }
-  onPtrEnter(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onEnter(...callbacks);
-    return this;
-  }
-  onPtrLeave(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onLeave(...callbacks);
-    return this;
-  }
-  onPtrOut(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onOut(...callbacks);
-    return this;
-  }
-  onPtrCancel(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onCancel(...callbacks);
-    return this;
-  }
   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;
   }
-  onMouseMove(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onMove(...callbacks);
-    return this;
-  }
-  onMouseDown(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onDown(...callbacks);
-    return this;
-  }
-  onMouseUp(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onUp(...callbacks);
-    return this;
-  }
-  onMouseEnter(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onEnter(...callbacks);
-    return this;
-  }
-  onMouseLeave(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onLeave(...callbacks);
-    return this;
-  }
-  onMouseOut(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onOut(...callbacks);
-    return this;
-  }
-  onWheel(...callbacks){
-    if(!this.events.wheel)this.events.wheel = useWheelEvent(this);
-    this.events.wheel.onWheel(...callbacks);
-    return this;
-  }
-  onKeyDown(...callbacks){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.onDown(...callbacks);
-    return this;
-  }
-  onKeyPress(...callbacks){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.onPress(...callbacks);
-    return this;
-  }
-  onKeyUp(...callbacks){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.onUp(...callbacks);
-    return this;
-  }
-  onKeysDown({keys=[],callback}={}){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.handleSuccessifKeys({keys,callback});
-    return this;
-  }
-  onDragStart(...callbacks){
-    if(!this.events.drag)this.events.drag = useDragEvent(this);
-    this.events.drag.onStart(...callbacks);
-    return this;
-  }
-  onDrag(...callbacks){
-    if(!this.events.drag)this.events.drag = useDragEvent(this);
-    this.events.drag.onDrag(...callbacks);
-    return this;
-  }
-  onDragEnd(...callbacks){
-    if(!this.events.drag)this.events.drag = useDragEvent(this);
-    this.events.drag.onEnd(...callbacks);
-    return this;
-  }
-  onDrop(...callbacks){
-    if(!this.events.drop)this.events.drop = useDropEvent(this);
-    this.events.drop.onDrop(...callbacks);
-    return this;
-  }
-  onClick(...callbacks){
-    if(!this.events.click)this.events.click = useClickEvent(this);
-    this.events.click.onClick(...callbacks);
-    return this;
-  }
-  onDbClick(...callbacks){
-    if(!this.events.click)this.events.click = useClickEvent(this);
-    this.events.click.onDbClick(...callbacks);
-    return this;
-  }
-  onCopy(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onCopy(...callbacks);
-    return this;
-  }
-  onCut(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onCut(...callbacks);
-    return this;
-  }
-  onPaste(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onPaste(...callbacks);
-    return this;
-  }
-  onSelect(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onSelect(...callbacks);
-    return this;
-  }
-  onFocus(...callbacks){
-    if(!this.events.focus)this.events.focus = useFocusEvent(this);
-    this.events.focus.onFocus(...callbacks);
-    return this;
-  }
-  onBlur(...callbacks){
-    if(!this.events.focus)this.events.focus = useFocusEvent(this);
-    this.events.focus.onFocus(...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);
@@ -510,19 +368,19 @@ class ZikoUIElement {
     this.observer.intersection.start();
     return this;
   }
-  setFullScreen(set = true, e) {
-    if(!this.element.requestFullscreen){
-      console.error("Fullscreen API is not supported in this browser.");
-      return this;
-    }
-    if (set) this.element.requestFullscreen(e);
-    else globalThis.document.exitFullscreen();
-    return this;
-  }
-  toggleFullScreen(e) {
-    if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
-    else globalThis.document.exitFullscreen();
-    return this;
-  }
+  // setFullScreen(set = true, e) {
+  //   if(!this.element.requestFullscreen){
+  //     console.error("Fullscreen API is not supported in this browser.");
+  //     return this;
+  //   }
+  //   if (set) this.element.requestFullscreen(e);
+  //   else globalThis.document.exitFullscreen();
+  //   return this;
+  // }
+  // toggleFullScreen(e) {
+  //   if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
+  //   else globalThis.document.exitFullscreen();
+  //   return this;
+  // }
 }
 export default ZikoUIElement;

package/src/ui/elements/semantic/index.js

@@ -1,82 +1,42 @@
-import ZikoUIElement from "../ZikoUIElement";
-class ZikoUIMain extends ZikoUIElement{
-    constructor(){
-      super("main","Main");
-    }
-    get isMain(){
-      return true
-    }
-  }
-  class ZikoUIHeader extends ZikoUIElement{
-    constructor(){
-      super("header","Header");
-    }
-    get isHeader(){
-      return true
-    }
-  }
-  class ZikoUINav extends ZikoUIElement{
-    constructor(){
-      super("nav","Nav");
-    }
-    get isNav(){
-      return true
-    }
-  }
-  class ZikoUISection extends ZikoUIElement{
-    constructor(){
-      super("section","Section");
-      this.style({position:"relative"})
-    }
-    get isSection(){
-      return true
-    }
-  }
-  class ZikoUIArticle extends ZikoUIElement{
-    constructor(){
-      super("article","Article");
-    }
-    get isArticle(){
-      return true
-    }
-  }
-  class ZikoUIAside extends ZikoUIElement{
-    constructor(){
-      super("aside","Aside");
-    }
-    get isAside(){
-      return true
-    }
-  }
-  class ZikoUIFooter extends ZikoUIElement{
-    constructor(){
-      super("footer","Footer");
-      this.element=document?.createElement("footer");
-    }
-    get isFooter(){
-      return true
-    }
-  }
-const Section = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
-const Article = (...ZikoUIElement) => new ZikoUIArticle().append(...ZikoUIElement);
-const Main = (...ZikoUIElement) => new ZikoUIMain().append(...ZikoUIElement);
-const Header = (...ZikoUIElement) => new ZikoUIHeader().append(...ZikoUIElement);
-const Footer = (...ZikoUIElement) => new ZikoUIFooter().append(...ZikoUIElement);
-const Nav = (...ZikoUIElement) => new ZikoUINav().append(...ZikoUIElement);
-const Aside = (...ZikoUIElement) => new ZikoUIAside().append(...ZikoUIElement);
-export{
-  Header,
+import ZikoUIElement from "../ZikoUIElement.js";
+const elements = ['Main', 'Header', 'Nav', 'Section', 'Article', 'Aside', 'Footer']
+
+// Storage for Classes and component functions
+const Classes = {};
+const Components = {};
+
+// Auto-generate Classes and factory functions
+for (let i=0; i<elements.length; i++) {
+  Classes[`ZikoUI${elements[i]}`] = class extends ZikoUIElement {
+    constructor() {
+      super(elements[i].toLowerCase());
+      this.style({ position: "relative" });
+    }
+    get [`is${elements[i]}`]() {
+      return true;
+    }
+  };
+
+  Components[elements[i]] = (...children) =>
+    new Classes[`ZikoUI${elements[i]}`]().append(...children);
+}
+
+export const {
   Main,
+  Header,
+  Nav,
   Section,
   Article,
   Aside,
-  Nav,
-  Footer,
-  ZikoUIHeader,
+  Footer
+} = Components;
+
+export const {
   ZikoUIMain,
+  ZikoUIHeader,
+  ZikoUINav,
   ZikoUISection,
   ZikoUIArticle,
   ZikoUIAside,
-  ZikoUINav,
   ZikoUIFooter
-}
+} = Classes;

package/src/ui/methods/events.js

@@ -0,0 +1,39 @@
+import { Events } from "../../events/__Events__";
+import {
+  bindPointerEvent,
+  bindMouseEvent,
+  bindKeyEvent,
+  bindClickEvent,
+  bindDragEvent,
+  bindClipboardEvent,
+  bindFocusEvent,
+  bindWheelEvent
+} from "../../events/index.js";
+
+const binderMap = {
+  ptr: bindPointerEvent,
+  mouse : bindMouseEvent,
+  key: bindKeyEvent,
+  click : bindClickEvent,
+  drag : bindDragEvent,
+  clipboard : bindClipboardEvent,
+  focus : bindFocusEvent,
+  wheel : bindWheelEvent
+};
+
+const EventsMethodes = {};
+
+Object.entries(Events).forEach(([name, eventList]) => {
+  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);
+      return this;
+    };
+  });
+});
+
+
+
+export {EventsMethodes}

package/src/use/decorators/index.js

@@ -0,0 +1,2 @@
+export * from './use-debounce.js'
+export * from './use-throttle.js'

package/src/use/decorators/use-debounce.js

@@ -0,0 +1,4 @@
+export const useDebounce=(fn,delay=1000)=>{
+    let id;
+    return(...args)=> id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay)
+}

package/src/use/decorators/use-throttle.js

@@ -0,0 +1,9 @@
+export const useThrottle=(fn,delay)=>{
+    let lastTime=0;
+    return (...args)=>{
+        const now=new Date().getTime()
+        if(now-lastTime<delay)return;
+        lastTime=now;
+        fn(...args); 
+    }
+}

package/src/use/index.js

@@ -0,0 +1,3 @@
+export * from './storage/index.js';
+export * from './decorators/index.js';
+export * from './interactions/index.js';

package/src/use/interactions/index.js

@@ -0,0 +1,3 @@
+export * from "./use-channel.js";
+export * from "./use-thread.js";
+export * from "./use-event-emmiter.js"

package/src/{reactivity/hooks/Interactions/useChannel.js → use/interactions/use-channel.js}

@@ -1,12 +1,12 @@
-import { Random } from "../../../math/random";
+import { Random } from "../../math/random/index.js";
 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="";
+    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]);
+        this.SUBSCRIBERS = new Set([this.UUID]);
     }
     get broadcast(){
         // update receiver
@@ -46,5 +46,5 @@ class ZikoUseChannel{
         return this;
     }
 }
-const useChannel=name=>new ZikoUseChannel(name);
+const useChannel = name => new ZikoUseChannel(name);
 export{ useChannel }

package/src/{reactivity/hooks/Storage/useStorage.js → use/storage/index.js}

@@ -1,7 +1,7 @@
 // To do : remove old items
-import { useChannel } from "../Interactions";
+import { useChannel } from "../interactions/use-channel.js";
 class ZikoUseStorage{
-    constructor(storage,globalKey,initialValue){
+    constructor(storage, globalKey, initialValue){
         this.cache={
             storage,
             globalKey,

package/src/app/json-style-sheet.js

@@ -1,64 +0,0 @@
-import { json2css } from "../data/index.js";
-class ZikoJsonStyleSheet{
-    constructor(JsonStyle={}){
-        this.cache={
-            JsonStyle,
-            isRenderd : false
-        }
-        this.target = globalThis?.document?.head;
-        this.element =  document.createElement("style");
-        this.element.setAttribute("data-generator","zikojs");
-        this.write();
-        this.render()
-    }
-    get CssText(){
-        return json2css(this.cache.JsonStyle);
-    }
-    render(){
-        this.target.append(this.element);
-        this.cache.isRenderd = true;
-        return this;
-    }
-    unrender(){
-        if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
-        this.cache.isRenderd = false;
-        return this;
-    }
-    write(){
-        this.element.textContent = this.CssText;
-        return this;
-    }
-    style(styles, overwrite = false){
-        if(overwrite) this.clear();
-        Object.assign(this.cache.JsonStyle,styles);
-        this.write();
-        return this;
-    }
-    clear(){
-        this.cache.JsonStyle = {}
-        this.write();
-        return this;
-    }
-    // overrideGlobal(style){
-    //     if(this.cache.JsonStyle["*"]){
-    //         Object.assign(this.cache.JsonStyle["*"],style);
-    //     }
-    //     else Object.assign();
-    //     this.write();
-    //     return this;
-    // }
-}
-
-const jsonStyleSheet = JsonStyle =>new ZikoJsonStyleSheet(JsonStyle);
-export {
-    jsonStyleSheet,
-    ZikoJsonStyleSheet
-}
-
-
-//  p().style({color:"red"})
-//  jsonStyleSheet({
-//    p:{
-//     color : "green !important"
-//    }
-//  })

package/src/compose.js

@@ -1,89 +0,0 @@
-function composeInstance(instance, mixin) {
-  const descriptors = Object.getOwnPropertyDescriptors(mixin);
-
-  for (const key of Reflect.ownKeys(descriptors)) {
-    const desc = descriptors[key];
-
-    if ('get' in desc || 'set' in desc) {
-      Object.defineProperty(instance, key, desc);
-    } else if (typeof desc.value === 'function') {
-      instance[key] = desc.value.bind(instance); // override-safe
-    } else {
-      instance[key] = desc.value;
-    }
-  }
-}
-
-function composeClass(Base, mixin) {
-  const descriptors = Object.getOwnPropertyDescriptors(mixin);
-
-  return class extends Base {
-    constructor(...args) {
-      super(...args);
-      for (const key of Reflect.ownKeys(descriptors)) {
-        const desc = descriptors[key];
-        if (typeof desc.value === 'function') {
-          this[key] = desc.value.bind(this); // override-safe
-        }
-      }
-    }
-  };
-}
-
-
-function defineAccessorsAndData(proto, mixin) {
-  const descriptors = Object.getOwnPropertyDescriptors(mixin);
-  for (const key of Reflect.ownKeys(descriptors)) {
-    const desc = descriptors[key];
-    if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
-      Object.defineProperty(proto, key, desc);
-    }
-  }
-}
-
-
-function compose(target, mixin) {
-  if (typeof target === 'function') {
-    const Composed = composeClass(target, mixin);
-    defineAccessorsAndData(Composed.prototype, mixin); // this order ensures overriding
-    return Composed;
-  } else if (typeof target === 'object' && target !== null) {
-    composeInstance(target, mixin);
-  } else {
-    throw new TypeError("compose: target must be a class or instance");
-  }
-}
-const mixin = {
-  greet() { return `Hello from mixin, ${this.name}`; },
-  get upperName() { return this.name.toUpperCase(); }
-};
-
-class Person {
-  constructor(name) {
-    this.name = name;
-  }
-  greet() {
-    return `Hello from class, ${this.name}`;
-  }
-}
-
-// CLASS MODE
-const ComposedPerson = compose(Person, mixin);
-const p1 = new ComposedPerson("Zak");
-console.log(p1.greet());       // Hello from mixin, Zak
-console.log(p1.upperName);     // ZAK
-
-// INSTANCE MODE
-class Animal {
-  constructor(name) {
-    this.name = name;
-    compose(this, mixin);
-  }
-
-  greet() {
-    return `Animal says hi, ${this.name}`;
-  }
-}
-const a = new Animal("Milo");
-console.log(a.greet());        // Hello from mixin, Milo
-console.log(a.upperName);      // MILO

package/src/math/calculus/derivation/index.js

@@ -1,7 +0,0 @@
-// import { mapfun } from "../../utils";
-
-// const __derivate=(f,x0)=>(f(x0+1e-32)-f(x0))/(1e-32);
-// const derivate=(f,x)=>mapfun(n=>__derivate(f,n),...x);
-// export{
-//     derivate
-// }

package/src/math/calculus/index.js

@@ -1,2 +0,0 @@
-export * from "./special-functions"
-// export * from "./derivation"

package/src/math/calculus/special-functions/bessel.js

@@ -1,31 +0,0 @@
-import { mapfun } from "../../utils/index.js";
-import { fact } from "../../functions/index.js";
-const _bessel=(n, x)=>{
-    const maxTerms = 100;
-    let result = 0;
-    for (let k = 0; k < maxTerms; k++) {
-        const numerator = Math.pow(-1, k) * Math.pow(x / 2, n + 2 * k);
-        const denominator = fact(k) * fact(n + k);
-        result += numerator / denominator;
-    }
-    return result;
-}
-const bessel=(n,x)=>{
-    if(typeof n === "number"){
-        if(typeof n === "number")return _bessel(n,x);
-        else console.warn("Not supported yet")
-    }
-    else if(n instanceof Array){
-        if(typeof x === "number") return mapfun(a=>_bessel(a,x),...n);
-        else if(x instanceof Array){
-            const Y=[];
-            for(let i=0;i<n.length;i++){
-                Y.push(mapfun(a=>_bessel(n[i],a),...x))
-            }
-            return Y;
-        }
-    }
-}
-export{
-    bessel
-}