ziko 0.0.25 → 0.0.27

package/src/reactivity/events-exp/__ZikoEvent__.js

@@ -0,0 +1,160 @@
+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);
+    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__ {
+    constructor(target = null, Events = [], details_setter, customizer){
+        this.target = target;
+        this.cache = {
+            currentEvent : null,
+            event: null,
+            options : {},
+            preventDefault : {},
+            stopPropagation : {},
+            stopImmediatePropagation : {},
+            event_flow : {},
+            paused : {},
+            stream : {
+                enabled : {},
+                clear : {},
+                history : {}
+            },
+            callbacks : {},
+            __controllers__:{}
+        }
+        const events = Events.map(n=>getEvent(n))
+        events.forEach((event,i)=>{
+            Object.assign(this.cache.preventDefault, {[event] : false});
+            Object.assign(this.cache.options, {[event] : {}});
+            Object.assign(this.cache.paused, {[event] : false});
+            Object.assign(this.cache.stream.enabled, {[event] : false});
+            Object.assign(this.cache.stream.clear, {[event] : false});
+            Object.assign(this.cache.stream.history, {[event] : []});
+            Object.assign(this.cache.__controllers__, {[event] : e=>event_controller.call(this, e, event, details_setter, customizer)});
+            Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)})
+        })
+    }
+    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;
+    }
+    setTarget(UI){
+        this.target=UI;
+        return this;
+    }
+    __handle(event, handler, options, dispose){
+        this.targetElement?.addEventListener(event, handler, options);
+        return this;
+    }
+    __onEvent(event, options, dispose, ...callbacks){
+        if(callbacks.length===0){
+            console.log("00")
+            if(this.cache.callbacks[event]){
+                console.log("Call")
+                // this.cache.callbacks.map(n=>e=>n.call(this,e));
+                this.cache.callbacks[event].map(n=>e=>n.call(this,e))
+            }   
+            else {
+                return this;
+            }
+        }
+        else this.cache.callbacks[event] = callbacks.map(n=>e=>n.call(this,e));
+        this.__handle(event, this.cache.__controllers__[event],options, dispose)
+        return this;  
+    }
+    #override(methode, overrides, defaultValue){
+        if(defaultValue === "default") Object.assign(this.cache[methode], {...this.cache[methode], ...overrides});
+        const all = defaultValue === "default" 
+        ? this.cache[methode]
+        : Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
+        Object.assign(this.cache[methode], {...all,...overrides});
+        return this       
+    }
+    preventDefault(overrides = {}, defaultValue = "default"){
+        this.#override("preventDefault", overrides, defaultValue);
+        // const all=Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
+        // Object.assign(this.cache.preventDefault, {...all,...overrides});
+        return this;
+    }
+    stopPropagation(overrides = {}, defaultValue = "default"){
+        this.#override("stopPropagation", overrides, defaultValue);
+        return this;
+    }
+    stopImmediatePropagation(overrides = {}, defaultValue = "default"){
+        this.#override("stopImmediatePropagation", overrides, defaultValue);
+        return this;
+    }
+    setEventOptions(event, options){
+        this.pause({[event] : true, }, "default");
+        Object.assign(this.cache.options[getEvent(event)], options);
+        this.resume({[event] : true, }, "default");
+        return this;
+    }
+    pause(overrides = {}, defaultValue = "default"){
+        const all = defaultValue === "default" 
+          ? this.cache.stream.enabled
+          : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+        overrides={...all,...overrides};
+        for(let key in overrides){
+            if(overrides[key]){
+                this.targetElement?.removeEventListener(key, this.cache.__controllers__[key], this.cache.options[key]);
+                this.cache.paused[key]=true;
+            }
+        }
+        return this;
+    }
+    resume(overrides = {}, defaultValue = "default"){
+        const all = defaultValue === "default" 
+          ? this.cache.stream.enabled
+          : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+        overrides={...all,...overrides};
+        for(let key in overrides){
+            if(overrides[key]){
+                this.targetElement?.addEventListener(key,this.cache.__controllers__[key], this.cache.options[key]);
+                this.cache.paused[key]=false;
+            }
+        }
+        return this;
+     }
+    stream(overrides = {}, defaultValue = "default"){
+        this.cache.stream.t0=Date.now();
+        const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]))
+        overrides={...all,...overrides}
+        Object.assign(this.cache.stream.enabled,overrides);
+        return this;
+     }
+    clear(){
+
+    }
+    dispose(overrides = {}, defaultValue = "default"){
+        this.pause(overrides, defaultValue);
+
+        return this;
+    }
+}
+
+export {
+    __ZikoEvent__,
+    getEvent
+}

package/src/reactivity/events-exp/click.js

@@ -0,0 +1,19 @@
+import { __ZikoEvent__ } from "./__ZikoEvent__.js";
+import { Events } from "./__Events__.js";
+class ZikoEventClick extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Click, details_setter, customizer)
+    }
+}
+function details_setter(){
+    if(this.currentEvent==="click") this.dx = 0
+    else this.dx = 1
+    // console.log(this.currentEvent)
+}
+const __useClickEvent = (target, customizer) => new ZikoEventClick(target, customizer)
+
+globalThis.expClick = __useClickEvent
+export{
+    __useClickEvent,
+    ZikoEventClick
+}

package/src/reactivity/events-exp/index.js

@@ -0,0 +1,5 @@
+export * from "./__ZikoEvent__.js";
+export * from "./utils.js";
+// export * from "./click.js";
+// export * from "./key.js";
+// export * from "./pointer.js"

package/src/reactivity/events-exp/key.js

@@ -0,0 +1,27 @@
+import { __ZikoEvent__ } from "./__ZikoEvent__.js";
+import { Events } from "./__Events__.js";
+class ZikoEventKey extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Key, details_setter, customizer)
+    }
+}
+function 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;
+
+    }
+}
+const __useKeyEvent = (target, customizer) => new ZikoEventKey(target, customizer)
+
+export{
+    __useKeyEvent,
+    ZikoEventKey
+}

package/src/reactivity/events-exp/pointer.js

@@ -0,0 +1,48 @@
+import { __ZikoEvent__ } from "./__ZikoEvent__.js";
+import { Events } from "./__Events__.js";
+class ZikoEventPointer extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Pointer, details_setter, customizer);
+        this.isDown = false;
+    }
+}
+function details_setter(){
+    switch(this.currentEvent){
+        case "pointerdown" : {
+            this.dx = parseInt(this.event.offsetX);
+            this.dy = parseInt(this.event.offsetY);
+            this.isDown = true
+        }; break;
+        case "pointermove" : {
+            this.mx = parseInt(this.event.offsetX);
+            this.my = parseInt(this.event.offsetY);
+            this.isMove = true
+        }; break;
+        case "pointerup" : {
+            this.ux = parseInt(this.event.offsetX);
+            this.uy = parseInt(this.event.offsetY);
+            this.isDown = false;
+            console.log(this.target.width)
+            const delta_x=(this.ux-this.dx)/this.target.width;
+            const delta_y=(this.dy-this.uy)/this.target.height;
+            const HORIZONTAL_SWIPPE=(delta_x<0)?"left":(delta_x>0)?"right":"none";
+            const VERTICAL_SWIPPE=(delta_y<0)?"bottom":(delta_y>0)?"top":"none";
+            this.swippe={
+                h:HORIZONTAL_SWIPPE,
+                v:VERTICAL_SWIPPE,
+                delta_x,
+                delta_y
+            }
+        }; break;
+    }
+    // if(this.currentEvent==="click") this.dx = 0
+    // else this.dx = 1
+    // console.log(this.currentEvent)
+}
+const __usePointerEvent = (target, customizer) => new ZikoEventPointer(target, customizer)
+
+globalThis.expPointer = __usePointerEvent
+export{
+    __usePointerEvent,
+    ZikoEventPointer
+}

package/src/reactivity/events-exp/utils.js

@@ -0,0 +1,7 @@
+const getEvent=(event = "")=>{
+    if(event.startsWith("Ptr"))return `pointer${event.split("Ptr")[1].toLowerCase()}`;
+    return event.toLowerCase()
+}
+export{
+    getEvent
+}

package/src/reactivity/index.js

@@ -1,12 +1,15 @@
 import * as Events from "./events";
 import * as Observer from "./observer"
 import * as Hooks from "./hooks"
+import * as EventsExp from "./events-exp"
 const Reactivity={
     ...Events,
     ...Observer,
     ...Hooks,
+    ...EventsExp,
 }
 export * from "./events";
 export * from "./observer";
 export * from "./hooks";
+export * from "./events-exp";
 export default Reactivity;

package/src/ui/elements/ZikoUIElement.js

@@ -65,6 +65,7 @@ class ZikoUIElement {
       intersection:null
     }
     this.uuid = `${this.cache.name}-${Random.string(16)}`
+    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index() 
     this.cache.style.linkTo(this);
     useDefaultStyle && this.style({ 
       position: "relative",
@@ -77,7 +78,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()
-    this.setAttr("data-ref", this.uuid);
+    this.setAttr("data-ui-index", this.ui_index);
     if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
       globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this)
   }
@@ -161,12 +162,14 @@ class ZikoUIElement {
     }
     for (let i = 0; i < ele.length; i++) {
       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-      if (ele[i] instanceof ZikoUIElement) {
+      if(ele[i] instanceof Node) ele[i] = new ZikoUIElement(ele[i]);
+      if (ele[i]?.isZikoUIElement) {
         ele[i].cache.parent = this;
         this.element[adder](ele[i].element);
         ele[i].target = this.element;
         this.items[pusher](ele[i]);
-      } else if (ele[i] instanceof Object) {
+      } 
+      else if (ele[i] instanceof Object) {
         if (ele[i]?.style) this.style(ele[i]?.style);
         if (ele[i]?.attr) {
           Object.entries(ele[i].attr).forEach((n) =>
@@ -199,7 +202,7 @@ class ZikoUIElement {
   remove(...ele) {
     const remove = (ele) => {
       if (typeof ele === "number") ele = this.items[ele];
-      if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
+      if (ele?.isZikoUIElement) this.element?.removeChild(ele.element);
       this.items = this.items.filter((n) => n !== ele);
     };
     for (let i = 0; i < ele.length; i++) remove(ele[i]);
@@ -300,7 +303,7 @@ class ZikoUIElement {
   }
   setTarget(tg) {
     if(this.isBody) return ;
-    if (tg instanceof ZikoUIElement) tg = tg.element;
+    if (tg?.isZikoUIElement) tg = tg.element;
     this.unrender();
     this.target = tg;
     this.render();
@@ -316,7 +319,7 @@ class ZikoUIElement {
   }
   render(target = this.target) {
     if(this.isBody)return ;
-    if(target instanceof ZikoUIElement)target=target.element;
+    if(target?.isZikoUIElement)target=target.element;
     this.target=target;
     this.target?.appendChild(this.element);
     return this;
@@ -335,12 +338,12 @@ class ZikoUIElement {
     return this;
   }
   after(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
+    if(ui?.isZikoUIElement) ui=ui.element;
     this.element?.after(ui)
     return this;
   }
   before(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
+    if(ui?.isZikoUIElement) ui=ui.element;
     this.element?.before(ui)
     return this;
   }

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

@@ -7,7 +7,6 @@ class ZikoUIHtmlTag extends ZikoUIElement {
 class ZikoUIBtn extends ZikoUIElement {
   constructor(value = "button") {
     super("button","btn");
-    this.element = document?.createElement("button");
     this.setValue(value);
     this.st.cursor("pointer");
     globalThis.__Ziko__.__Config__.default.render && this.render();

package/src/ui/elements/text/__ZikoUIText__.js

@@ -47,9 +47,9 @@ class __ZikoUIText__ extends ZikoUIElement {
         
         if(this.cache.lineBreak)this.element?.appendChild(globalThis.document?.createElement("br"));
       });
-      if(this.element?.innerHTML){
-        this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
-      }
+      // if(this.element?.innerHTML){
+      //   this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
+      // }
       return this
     }
     setValue(...value) {