ziko 0.50.1 → 0.51.0

package/src/events/ziko-event.js

@@ -1,48 +1,54 @@
-import { getEvent } from "./utils.js"
+import { 
+    getEvent,
+    event_controller,
+    toggle_event_listener
+} from './utils.js'
 class ZikoEvent {
-    constructor(target = null, Events = [], details_setter, customizer){
+    constructor(signature, target = null, Events = [], details_setter, customizer){
         this.target = target;
         this.cache = {
+            signature,
             currentEvent : null,
             event: null,
             options : {},
             preventDefault : {},
             stopPropagation : {},
             stopImmediatePropagation : {},
-            event_flow : {},
             paused : {},
-            stream : {
-                enabled : {},
-                clear : {},
-                history : {}
-            },
             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)=>{
-            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)});
-            if(REGISTER_METHODES)Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)})
-        })
+        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;
+        return this.target?.element === this.event?.srcElement;
     }
     get item(){
-        return this.target.find(n=>n.element == this.event?.srcElement)?.[0];
+        return this.target.find(n => n.element == this.event?.srcElement)?.[0];
     }
     get currentEvent(){
         return this.cache.currentEvent;
@@ -50,117 +56,53 @@ class ZikoEvent {
     get event(){
         return this.cache.event;
     }
+    get detail(){
+        return this.cache.event.detail
+    }
     setTarget(UI){
-        this.target=UI;
+        this.target = UI;
         return this;
     }
-    __handle(event, handler, options, dispose){
+    __handle(event, handler, options){
         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});
+    #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;
     }
-    stopPropagation(overrides = {}, defaultValue = "default"){
-        this.#override("stopPropagation", overrides, defaultValue);
-        return this;
+    preventDefault(...events) {
+        return this.#override('preventDefault', ...events);
     }
-    stopImmediatePropagation(overrides = {}, defaultValue = "default"){
-        this.#override("stopImmediatePropagation", overrides, defaultValue);
-        return this;
+    stopPropagation(...events) {
+        return this.#override('stopPropagation', ...events);
+    }
+    stopImmediatePropagation(...events) {
+        return this.#override('stopImmediatePropagation', ...events);
     }
     setEventOptions(event, options){
-        this.pause({[event] : true, }, "default");
-        Object.assign(this.cache.options[getEvent(event)], options);
-        this.resume({[event] : true, }, "default");
+        const evt = getEvent(event);
+        this.pause();
+        Object.assign(this.cache.options[evt], options);
+        this.resume();
         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;
+    pause(...events) {
+        return toggle_event_listener.call(this, 'removeEventListener', ...events)
     }
-    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(){
-        return this;
+    resume(...events) {
+        return toggle_event_listener.call(this, 'addEventListener', ...events);
     }
-    dispose(overrides = {}, defaultValue = "default"){
-        this.pause(overrides, defaultValue);
-
+    dispose(){
+        this.pause();
+        this.target.events[this.cache.signature] = null
         return this;
     }
 }
-
-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,
     getEvent
-}
+}

package/src/router/file-based-router/index.js

@@ -0,0 +1,46 @@
+import { 
+    get_root,
+    normalize_path,
+    routes_matcher,
+    is_dynamic,
+    dynamic_routes_parser
+ } from "../utils/index.js"
+export async function createSPAFileBasedRouter(
+  pages, 
+  target = globalThis?.document?.body
+) {
+  if(!(target instanceof HTMLElement) && target?.element instanceof HTMLElement) target = target?.element;
+  if (!(target instanceof HTMLElement)) {
+    throw new Error("Invalid mount target: must be HTMLElement or UIElement");
+  }
+  let path = decodeURIComponent(globalThis.location.pathname.replace(/\/$/, ''));
+  const routes = Object.keys(pages);
+  const root = get_root(routes);
+
+  const pairs = {};
+  for (const route of routes) {
+    const module = await pages[route]();
+    const modComponent = await module.default;
+    pairs[normalize_path(route, root)] = modComponent;
+  }
+
+  let mask = null;
+  let component = null;
+
+  for (const [routePath, comp] of Object.entries(pairs)) {
+    if (routes_matcher(routePath, `/${path}`)) {
+      mask = routePath;
+      component = comp;
+      break;
+    }
+  }
+
+  if (!mask) return; // no route matched
+
+  const params = is_dynamic(mask) ? dynamic_routes_parser(mask, path) : undefined;
+  const mounted = params ? await component(params) : await component();
+
+  if(mounted instanceof HTMLElement) target.append(mounted);
+  else mounted.mount(target);
+
+}

package/src/router/index.js

@@ -0,0 +1,2 @@
+export * from './file-based-router/index.js'
+export * from './utils/index.js'

package/src/router/utils/dynamic-routes-parser.js

@@ -0,0 +1,76 @@
+export function dynamic_routes_parser(mask, route) {
+  const maskSegments = mask.split("/").filter(Boolean);
+  const routeSegments = route.split("/").filter(Boolean);
+  const params = {};
+  let i = 0, j = 0;
+  while (i < maskSegments.length && j < routeSegments.length) {
+    const maskSegment = maskSegments[i];
+    const routeSegment = routeSegments[j];
+    if (maskSegment.startsWith("[...") && maskSegment.endsWith("]")) {
+      const paramName = maskSegment.slice(4, -1);
+      const remainingMaskSegments = maskSegments.length - i - 1;
+      if (remainingMaskSegments === 0) {
+        params[paramName] = routeSegments.slice(j).join("/");
+        break;
+      }
+      let requiredSegments = 0;
+      for (let k = i + 1; k < maskSegments.length; k++) {
+        if (!maskSegments[k].endsWith("]+")) requiredSegments++;
+      }
+      const remainingRouteSegments = routeSegments.length - j;
+      const segmentsToConsume = remainingRouteSegments - requiredSegments;
+      if (segmentsToConsume >= 1) {
+        params[paramName] = routeSegments
+          .slice(j, j + segmentsToConsume)
+          .join("/");
+        j += segmentsToConsume;
+      } 
+      else return {};
+      i++;
+      continue;
+    }
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]+")) {
+      const paramName = maskSegment.slice(1, -2);
+      if (routeSegment) {
+        params[paramName] = routeSegment;
+        j++;
+      }
+      i++;
+      continue;
+    }
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]")) {
+      const paramName = maskSegment.slice(1, -1);
+      params[paramName] = routeSegment;
+    } 
+    else if (maskSegment !== routeSegment) return {};
+    i++;
+    j++;
+  }
+  return params;
+}
+
+
+// console.log("\n=== PARSER TESTS ===");
+// console.log(dynamic_routes_parser("/user/[id]+", "/user"));
+// // 👉 {}
+
+// console.log(dynamic_routes_parser("/user/[id]+", "/user/42"));
+// // 👉 { id: "42" }
+
+// console.log(dynamic_routes_parser("/blog/[...slug]", "/blog/2025/oct/post"));
+// // 👉 { slug: "2025/oct/post" }
+
+// console.log(
+//   dynamic_routes_parser("/product/[category]/[id]+", "/product/electronics"),
+// );
+// // 👉 { category: "electronics" }
+
+// console.log("\n=== FIX TEST ===");
+// console.log(dynamic_routes_parser("/[...slug]/[id]", "/sl1/sl2/9"));
+// // 👉 { slug: "sl1/sl2", id: "9" }
+
+// console.log(dynamic_routes_parser("/[slug]/[...id]", "/sl1/id1/id2"));
+// // 👉 { slug: "sl1", id: "id1/id2" }
+
+// console.log(dynamic_routes_parser("/blog/lang/[lang]/id/[id]", "/blog/lang/en/id/10"));
+// // 👉 { lang: "en", id: "10" }

package/src/router/utils/get-root.js

@@ -0,0 +1,16 @@
+export function get_root(paths) {
+   if (paths.length === 0) return '';
+   const splitPaths = paths.map(path => path.split('/'));
+   const minLength = Math.min(...splitPaths.map(parts => parts.length));
+   let commonParts = [];
+   for (let i = 0; i < minLength; i++) {
+       const part = splitPaths[0][i]; 
+       if (splitPaths.every(parts => parts[i] === part || parts[i].startsWith('['))) {
+           commonParts.push(part);
+       } 
+       else break; 
+       
+   }
+   const root = commonParts.join('/') + (commonParts.length ? '/' : '');
+   return root;
+}

package/src/router/utils/index.js

@@ -0,0 +1,5 @@
+export * from './normalize-path.js'
+export * from './routes-matcher.js'
+export * from './routes-grouper.js'
+export * from './dynamic-routes-parser.js'
+export * from './get-root.js'

package/src/router/utils/normalize-path.js

@@ -0,0 +1,17 @@
+export function normalize_path(inputPath, root = './src/pages', extensions = ['js', 'ts']) {
+    if(root.at(-1)==="/") root = root.slice(0, -1)
+    const normalizedPath = inputPath.replace(/\\/g, '/')
+                                    // .replace(/\[(\w+)\]/g, '$1/:$1');
+    const parts = normalizedPath.split('/');
+    const rootParts = root.split('/');
+    const rootIndex = parts.indexOf(rootParts[rootParts.length - 1]);
+    if (rootIndex !== -1) {
+        const subsequentParts = parts.slice(rootIndex + 1);
+        const lastPart = subsequentParts[subsequentParts.length - 1];
+        const isIndexFile = lastPart === 'index.js' || lastPart === 'index.ts';
+        const hasValidExtension = extensions.some(ext => lastPart === `.${ext}` || lastPart.endsWith(`.${ext}`));
+        if (isIndexFile) return '/' + (subsequentParts.length > 1 ? subsequentParts.slice(0, -1).join('/') : '');
+        if (hasValidExtension) return '/' + subsequentParts.join('/').replace(/\.(js|ts)$/, '');
+    }
+    return '';
+ }

package/src/router/utils/routes-grouper.js

@@ -0,0 +1,22 @@
+export function is_dynamic(path) {
+  const DynamicPattern = /(:\w+|\[\.\.\.\w+\]|\[\w+\]\+?)/;
+  return DynamicPattern.test(path);
+}
+export function routes_grouper(routeMap) {
+  const grouped = {
+    static: {},
+    dynamic: {},
+  };
+  for (const [path, value] of Object.entries(routeMap)) {
+    if (is_dynamic(path)) {
+      const segments = path.split("/").filter(Boolean);
+      const optionalIndex = segments.findIndex(seg => seg.endsWith("]+"));
+      const hasInvalidOptional =
+        optionalIndex !== -1 && optionalIndex !== segments.length - 1;
+      if (hasInvalidOptional) throw new Error(`Invalid optional param position in route: "${path}" — optional parameters can only appear at the end.`);
+      grouped.dynamic[path] = value;
+    } 
+    else grouped.static[path] = value;
+  }
+  return grouped;
+}

package/src/router/utils/routes-matcher.js

@@ -0,0 +1,60 @@
+export function routes_matcher(mask, route) {
+  const maskSegments = mask.split("/").filter(Boolean);
+  const routeSegments = route.split("/").filter(Boolean);
+  let i = 0, j = 0;
+  while (i < maskSegments.length && j < routeSegments.length) {
+    const maskSegment = maskSegments[i];
+    const routeSegment = routeSegments[j];
+    if (maskSegment.startsWith("[...") && maskSegment.endsWith("]")) {
+      const remainingMaskSegments = maskSegments.length - i - 1;
+      if (remainingMaskSegments === 0) return true;
+      // Calculate minimum required route segments for remaining mask
+      let requiredSegments = 0;
+      for (let k = i + 1; k < maskSegments.length; k++) {
+        if (!maskSegments[k].endsWith("]+")) {
+          requiredSegments++;
+        }
+      }
+      const remainingRouteSegments = routeSegments.length - j;
+      if (remainingRouteSegments < requiredSegments) return false;
+      const segmentsToConsume = remainingRouteSegments - requiredSegments;
+      if (segmentsToConsume < 1) return false;
+      j += segmentsToConsume;
+      i++;
+      continue;
+    }
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]+")) {
+      if (routeSegment) j++;
+      i++;
+      continue;
+    }
+    if (maskSegment.startsWith("[") && maskSegment.endsWith("]")) {
+      i++;
+      j++;
+      continue;
+    }
+    if (maskSegment !== routeSegment) return false;
+    i++;
+    j++;
+  }
+  while (i < maskSegments.length) {
+    const seg = maskSegments[i];
+    if (seg.endsWith("]+")) {
+      i++;
+      continue;
+    }
+    return false;
+  }
+  return i === maskSegments.length && j === routeSegments.length;
+}
+
+
+// // DEMO
+// console.log("=== EXISTING TESTS ===");
+// console.log(routes_matcher("/user/[id]+", "/user")); // true
+// console.log(routes_matcher("/user/[id]+", "/user/42")); // true
+// console.log(routes_matcher("/blog/[...slug]", "/blog/a/b")); // true
+// console.log(routes_matcher("/blog/[id]", "/blog")); // false
+// console.log(routes_matcher("/product/:id", "/product/99")); // true
+
+

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

@@ -7,7 +7,9 @@ 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";
@@ -20,7 +22,9 @@ 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 = {
@@ -40,9 +44,9 @@ Object.entries(EventsMap).forEach(([name, eventList]) => {
   const lname = name.toLowerCase()
   eventList.forEach(event => {
     const methodName = `on${event}`;
-    EventsMethodes[methodName] = function (...callbacks) {
+    EventsMethodes[methodName] = function (callbacks) {
       if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
-      this.events[lname][methodName](...callbacks);
+      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;
+}