ziko 1.9.0 → 2.0.0-alpha.0

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

@@ -0,0 +1,49 @@
+export function is_dynamic(path) {
+  const DynamicPattern = /(:\w+|\[\[\.\.\.\w+\]\]|\[\.\.\.\w+\]|\[\w+\]\+?)/;
+  return DynamicPattern.test(path);
+}
+export function sort_routes(routeKeys) {
+  return [...routeKeys].sort((a, b) => {
+    const aIsOptionalCatchAll = a.includes('[[...');
+    const bIsOptionalCatchAll = b.includes('[[...');
+    
+    const aIsCatchAll = a.includes('[...') && !aIsOptionalCatchAll;
+    const bIsCatchAll = b.includes('[...') && !bIsOptionalCatchAll;
+    
+    const aIsDynamic = is_dynamic(a);
+    const bIsDynamic = is_dynamic(b);
+
+    // 1. Optional catch-alls [[...slug]] ALWAYS go last
+    if (aIsOptionalCatchAll && !bIsOptionalCatchAll) return 1;
+    if (!aIsOptionalCatchAll && bIsOptionalCatchAll) return -1;
+
+    // 2. Catch-alls [...slug] go right before optional catch-alls
+    if (aIsCatchAll && !bIsCatchAll) return 1;
+    if (!aIsCatchAll && bIsCatchAll) return -1;
+
+    // 3. Static routes go before standard dynamic routes ([id])
+    if (!aIsDynamic && bIsDynamic) return -1;
+    if (aIsDynamic && !bIsDynamic) return 1;
+
+    // 4. Deeper/longer routes take precedence over shorter ones
+    return b.length - a.length;
+  });
+}
+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 → internal-utils}/routes-matcher.js

@@ -2,18 +2,33 @@ 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];
+
+    // Optional Catch-all [[...slug]]
+    if (maskSegment.startsWith("[[...") && maskSegment.endsWith("]]")) {
+      const remainingMaskSegments = maskSegments.length - i - 1;
+      if (remainingMaskSegments === 0) return true;
+      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 < 0) return false;
+      j += segmentsToConsume;
+      i++;
+      continue;
+    }
+
+    // Required Catch-all [...slug]
     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++;
-        }
+        if (!maskSegments[k].endsWith("]+")) requiredSegments++;
       }
       const remainingRouteSegments = routeSegments.length - j;
       if (remainingRouteSegments < requiredSegments) return false;
@@ -23,32 +38,40 @@ export function routes_matcher(mask, route) {
       i++;
       continue;
     }
+
     if (maskSegment.startsWith("[") && maskSegment.endsWith("]+")) {
-      if (routeSegment) j++;
+      if (routeSegments[j]) j++;
       i++;
       continue;
     }
+
     if (maskSegment.startsWith("[") && maskSegment.endsWith("]")) {
       i++;
       j++;
       continue;
     }
-    if (maskSegment !== routeSegment) return false;
+
+    if (maskSegment !== routeSegments[j]) return false;
     i++;
     j++;
   }
+
   while (i < maskSegments.length) {
     const seg = maskSegments[i];
+    // [[...slug]] and [param]+ can match empty segments at the end
+    if (seg.startsWith("[[...") && seg.endsWith("]]")) {
+      i++;
+      continue;
+    }
     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

package/src/{hooks/use-query-params.js → router/useQueryParams/index.js}

@@ -1,4 +1,3 @@
-import { useState } from "./use-state.js";
 const parseQueryParams = queryString => Object.fromEntries(new URLSearchParams(globalThis?.location?.search))
 
 export function useQueryParams() {

package/src/time/{clocks/clock.js → clock/index.js}

@@ -1,4 +1,4 @@
-import { Tick } from "./tick.js";
+import { Tick } from "../tick/index.js";
 
 class Clock extends Tick {
   constructor(tickMs = 1000 / 60) {

package/src/time/{clocks/clock.d.ts → clock/index.ts}

@@ -1,4 +1,4 @@
-import { Tick } from "./tick.js";
+import { Tick } from "../tick/index.js";
 
 export interface ClockTickEvent {
     elapsed: number;

package/src/time/debounce/index.d.ts

@@ -0,0 +1,4 @@
+export declare function debounce<T extends (...args: any[]) => any>(
+    fn: T,
+    delay?: number
+): (...args: Parameters<T>) => void;

package/src/time/debounce/index.js

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

package/src/time/index.d.ts

@@ -1,5 +1,7 @@
-export type * from './ease/index.d.ts'
-export type * from './clocks/index.d.ts'
-export type * from './decorators/index.d.ts'
-export type * from './loop/index.d.ts'
-export type * from './animation/index.d.ts'
+export type * from './clock/index.d.ts';
+export type * from './debounce/index.d.ts';
+export type * from './schedular/index.d.ts';
+export type * from './sleep/index.d.ts';
+export type * from './throttle/index.d.ts';
+export type * from './tick/index.d.ts';
+export type * from './timeout/index.d.ts';

package/src/time/index.js

@@ -1,8 +1,7 @@
-export * from './animation/index.js'
-export * from './clocks/index.js'
-export * from './converters/index.js'
-export * from './decorators/index.js';
-export * from './delay/index.js'
-export * from './ease/index.js'
-export * from './loop/index.js'
-export * from './utils/index.js';
+export * from './clock/index.js';
+export * from './debounce/index.js';
+export * from './schedular/index.js';
+export * from './sleep/index.js';
+export * from './throttle/index.js';
+export * from './tick/index.js';
+export * from './timeout/index.js';

package/src/time/sleep/index.d.ts

@@ -0,0 +1 @@
+export declare const sleep: (ms: number) => Promise<void>;

package/src/time/sleep/index.js

@@ -0,0 +1 @@
+export const sleep= ms => new Promise(res => setTimeout(res, ms));

package/src/time/throttle/index.d.ts

@@ -0,0 +1,4 @@
+export declare function throttle<T extends (...args: any[]) => any>(
+    fn: T,
+    delay: number
+): (...args: Parameters<T>) => void;

package/src/time/throttle/index.js

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

package/src/time/{clocks/tick.js → tick/index.js}

@@ -1,4 +1,4 @@
-class Tick {
+export class Tick {
   constructor(fn, ms, count = Infinity, start) {
     this.ms = ms;
     this.fn = fn;
@@ -40,9 +40,4 @@ class Tick {
 }
 
 // Helper factory
-const tick = (fn, ms, count = Infinity, start = true) => new Tick(fn, ms, count, start);
-
-export {
-  Tick,
-  tick
-};
+export const tick = (fn, ms, count = Infinity, start = true) => new Tick(fn, ms, count, start);

package/src/time/{delay → timeout}/index.d.ts

@@ -1,5 +1,3 @@
-export declare const sleep: (ms: number) => Promise<void>;
-
 export interface TimeoutResult {
     id: ReturnType<typeof setTimeout>;
     clear: () => void;

package/src/time/{delay → timeout}/index.js

@@ -1,4 +1,3 @@
-export const sleep= ms => new Promise(res => setTimeout(res, ms));
 export function timeout(ms, fn) {
   let id;
   const promise = new Promise((resolve) => {

package/src/app/globals.js

@@ -1,76 +0,0 @@
-import { defineParamsGetter } from './params.js'
-const __UI__={
-    __all__(){
-        return Object.values(this)
-          .filter(Array.isArray)
-          .flat();
-    },
-    querySelectorAll(){
-        return this.__all__().filter(n=>n)
-    },
-    getElementByIndex(index){
-        return this.__all__().find(n=>n.ui_index===index);
-    },
-    getElementById(id){
-        return null;
-    },
-    getElementsByClass(){
-
-    },
-    getElementsByTagName(){
-        
-    }
-}
-const __HYDRATION__ = {
-    map : new Map(),
-    index : 0,
-    increment : function(){
-        return this.index ++
-    }
-}
-const __HYDRATION_MAP__ = new Map()
-const __Config__={
-    default:{
-        target:null,
-        render:true,
-        math:{
-            mode:"deg"
-        }
-    },
-    setDefault:function(pairs){
-        const keys=Object.keys(pairs);
-        const values=Object.values(pairs);
-        for(let i=0; i<keys.length; i++) this.default[keys[i]]=values[i];
-    },
-    init:()=>{
-        // document.documentElement.setAttribute("data-engine","zikojs")
-    },
-    renderingMode :"spa",
-    isSSC : false,
-}
-const __CACHE__ = {
-    ui_index : 0,
-    get_ui_index:function(){
-        return this.ui_index ++
-    }
-}
-if ( !globalThis?.__Ziko__ ){
-    globalThis.__Ziko__ = {
-                // ...Ziko,
-                __UI__,
-                __HYDRATION__,
-                __HYDRATION_MAP__,
-                __Config__,
-                __CACHE__,
-                // ExtractAll,
-                // RemoveAll
-            };
-    defineParamsGetter(__Ziko__)
-}
-export {
-    __UI__,
-    __HYDRATION_MAP__,
-    __Config__,
-    __CACHE__,
-    __HYDRATION__
-}

package/src/app/index.js

@@ -1,18 +0,0 @@
-export * from "./ziko-app.js";
-export * from "./spa.js"
-export * from "./params.js"
-// export * from "./globals.js"
-export * from "./spa-file-based-routing.js"
-
-import * as __App__ from "./ziko-app.js"
-import * as Spa from "./spa.js"
-// import * as Global from "./globals.js"
-// import * as Params from "./params"
-
-const App = {
-    ...__App__,
-    ...Spa,
-    // ...Global,
-    // ...Params
-}
-export default App

package/src/app/params.js

@@ -1,37 +0,0 @@
-function parseQueryParams(queryString) {
-    return Object.fromEntries(
-            new URLSearchParams(location.search)
-        );
-}
-
-function defineParamsGetter(target ){
-    Object.defineProperties(target, {
-        'QueryParams': {
-            get: function() {
-                return parseQueryParams(globalThis.location.search.substring(1));
-            },
-            configurable: false,
-            enumerable: true 
-        },
-        'HashParams': {
-            get: function() {
-                const hash = globalThis.location.hash.substring(1);
-                return hash.split("#");
-            },
-            configurable: false,
-            enumerable: true 
-        }
-    });
-}
-
-
-/*
-
-  /users?name=ziko&age=26
-  /users#name=ziko
-
-*/
-
-export{
-    defineParamsGetter
-}

package/src/app/routes.js

@@ -1,57 +0,0 @@
-function routesMatcher(mask, route) {
-    const maskSegments = mask.split('/');
-    const routeSegments = route.split('/');
-    if (maskSegments.length !== routeSegments.length) {
-        return false;
-    }
-    for (let i = 0; i < maskSegments.length; i++) {
-        const maskSegment = maskSegments[i];
-        const routeSegment = routeSegments[i];
-        if (maskSegment.startsWith(':')) {
-            continue;
-        } else if (maskSegment !== routeSegment) {
-            return false;
-        }
-    }    
-    return true;
-}
-function dynamicRoutesParser(mask, route) {
-    const maskSegments = mask.split('/');
-    const routeSegments = route.split('/');
-    const params = {};
-    if (maskSegments.length !== routeSegments.length) {
-        return params; 
-    }
-    for (let i = 0; i < maskSegments.length; i++) {
-        const maskSegment = maskSegments[i];
-        const routeSegment = routeSegments[i];
-        if (maskSegment.startsWith(':')) {
-            const paramName = maskSegment.slice(1); 
-            params[paramName] = routeSegment;
-        } else if (maskSegment !== routeSegment) {
-            return {};
-        }
-    }
-    return params;
-}
-
-function isDynamic(path) {
-    const DynamicPattern = /:\w+/;    
-    return DynamicPattern.test(path);
-  }
-
-// // Example usage:
-// const mask = "/:id/id/:lang/lang";
-// const route = "/id/5/lang/fr";
-// console.log(DynamicRouteMatcher(mask, route)); // Should return true
-
-export {
-    routesMatcher,
-    dynamicRoutesParser,
-    isDynamic
-}
-
-// // Example usage:
-// const mask = "app/lang/:lang/id/:id";
-// const route = "app/lang/en/id/7";
-// console.log(dynamicRoutesParser(mask, route)); // Should return { lang: "en", id: "7" }

package/src/app/spa-file-based-routing.js

@@ -1,74 +0,0 @@
-import { SPA } from "./spa.js";
-import { tags } from "../dom/index.js";
-// import.meta.glob('./src/pages/**/*.js')
-async function FileBasedRouting(pages /* use import.meta.glob */){
-   const routes = Object.keys(pages)
-   const root = findCommonPath(routes)
-   const pairs = {}
-   for(let i=0; i<routes.length; i++){
-      const module = await pages[routes[i]]()
-      const component = await module.default
-      Object.assign(pairs,{[customPath(routes[i], root)]:component})
-   }
-   return SPA({
-      target : document.body,
-      routes : {
-         "/" : ()=>{},
-         ...pairs
-      },
-      wrapper : tags.section()
-   })   
-}
-function customPath(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.at(-1));
-   if (rootIndex !== -1) {
-       const subsequentParts = parts.slice(rootIndex + 1);
-       const lastPart = parts.at(-1);
-       const isIndexFile = lastPart === 'index.js' || lastPart === 'index.ts';
-    //    console.log({extensions, subsequentParts, lastPart, isIndexFile, rootParts, rootIndex, parts})
-       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 '';
-}
-function findCommonPath(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 commonPath = commonParts.join('/') + (commonParts.length ? '/' : '');
-   return commonPath;
-}
-
-// // Example usage
-// const inputPaths = [
-//    './src/pages/[blog]/[lang]/index.js',
-//    './src/pages/[blog]/index.js',
-//    './src/pages/about.js',
-//    './src/pages/articles/[data]/[color]/index.js',
-//    './src/pages/articles/a1.js',
-//    './src/pages/index.js',
-//    './src/pages/me.js'
-// ];
-
-// console.log(findCommonPath(inputPaths)); // Output: './src/pages/'
-export{
-    FileBasedRouting,
-}

package/src/app/spa.js

@@ -1,55 +0,0 @@
-import { text } from "../dom/index.js";
-import { dynamicRoutesParser,routesMatcher,isDynamic } from "./routes.js";
-import { ZikoApp } from "./ziko-app.js";
-class ZikoSPA extends ZikoApp{
-    constructor({head, wrapper, target, routes}){
-        super({head, wrapper, target})
-        this.routes=new Map([
-            ["404",text("Error 404")],
-            ...Object.entries(routes)
-        ]);
-        this.clear();
-        globalThis.onpopstate = this.mount(location.pathname);
-    }
-    clear(){
-        [...this.routes].forEach(n=>{
-            !isDynamic(n[0]) && n[1]?.isUIElement && n[1].unmount()
-        })   
-        // this.wrapper.clear();
-        return this;
-    }
-    mount(path){
-        const [mask, callback] = [...this.routes].find(route=>routesMatcher(route[0],path));
-        let element ;
-        if(isDynamic(mask)){
-            const params = dynamicRoutesParser(mask, path)
-            element = callback.call(this,params)
-        }
-        else {
-            callback?.isUIElement && callback.mount(this.wrapper); 
-            if(typeof callback === "function") element = callback();  
-        }
-        if(element?.isUIElement) element.mount(this.wrapper);
-        // if(element?.isZikoApp) element.mount(this.wrapper);
-        if(element instanceof Promise){
-            element.then(e=>e.mount(this.wrapper))
-        }
-        globalThis.history.pushState({}, "", path);
-        return this;
-    }
-}
-const SPA=({head, wrapper, target, routes})=>new ZikoSPA({head, wrapper, target, routes});
-
-export {
-    ZikoSPA,
-    SPA
-}
-
-
-/*
- // Static 
-  S.get("/url",wrapper)
-// Dynamique 
- s.get("/url/name/:name/id/:id",(path,name,id)=>handler())
-// regEx
-*/

package/src/app/ziko-app.js

@@ -1,39 +0,0 @@
-// import { ZikoHead , useHead} from "../reactivity/hooks/head/index.js";
-class ZikoApp {
-    constructor({head = null, wrapper = null, target = null}){
-        this.head = head;
-        this.wrapper = wrapper;
-        this.target = target;
-        this.init()        
-    }
-    get isZikoApp(){
-        return true;
-    }
-    init(){
-        this.head && this.setHead(this.head);
-        this.wrapper && this.setWrapper(this.wrapper);
-        this.target && this.setTarget(this.target);
-        if(this.wrapper && this.target)this.wrapper.mount(this.target);
-    }
-    setTarget(target){
-        if(target instanceof HTMLElement) this.target = target;
-        else if (typeof target === "string") this.target = globalThis?.document?.querySelector(target);
-        return this;
-    }
-    setWrapper(wrapper){
-        if(wrapper?.isUIElement) this.wrapper = wrapper;
-        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;  
-    // }
-    
-}
-const App = ({head, wrapper, target}) => new ZikoApp({head, wrapper, target})
-export{
-    ZikoApp,
-    App
-}

package/src/data/api/fetchdom.js

@@ -1,30 +0,0 @@
-// import { preload } from "./preload";
-
-// async function fetchdom(url='https://github.com/zakarialaoui10') {
-//   try {
-//     const response = await fetch(url);
-//     if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-//     const html = await response.text();
-//     const dom = new DOMParser().parseFromString(html, 'text/html');
-//     return dom.documentElement;
-//   } catch (err) {
-//     console.error('Failed to fetch DOM:', err);
-//     throw err;
-//   }
-// }
-
-// function fetchdomSync(url='https://github.com/zakarialaoui10') {
-//   try {
-//     const data = preload(url);
-//     const dom = new DOMParser().parseFromString(data, 'text/html');
-//     return dom.documentElement;
-//   } catch (err) {
-//     console.error('Failed to fetch DOM synchronously:', err);
-//     throw err;
-//   }
-// }
-
-// export { 
-//   fetchdom, 
-//   fetchdomSync 
-// };

package/src/data/api/index.js

@@ -1,4 +0,0 @@
-// export { preload } from "./preload";
-// import { fetchdom ,fetchdomSync } from "./fetchdom";
-// globalThis.fetchdom=fetchdom
-// globalThis.fetchdomSync=fetchdomSync

package/src/data/api/preload.js

@@ -1,11 +0,0 @@
-const preload=(url)=>{
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", url, false); 
-    xhr.send();
-    if (xhr.status === 200) {
-      return xhr.responseText;
-    } else {
-      throw new Error(`Failed to fetch data from ${url}. Status: ${xhr.status}`);
-    }
-}
-export {preload}