ziko 1.9.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",

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

@@ -1,23 +1,50 @@
+// file-based-router/index.js
+
 import { 
     get_root,
     normalize_path,
     routes_matcher,
     is_dynamic,
     dynamic_routes_parser,
+    sort_routes,
     renderer as ziko_renderer
- } from "../utils/index.js"
-export async function createSPAFileBasedRouter({
+} from "../utils/index.js";
+
+/**
+ * Environment-independent file-based router core
+ */
+export async function createFileBasedRouter({
   pages = {},
-  target = globalThis?.document?.body,
+  url = typeof location !== 'undefined' ? location.pathname : '/',
+  target = typeof document !== 'undefined' ? document.body : null,
   extensions = ['js', 'ts'],
   renderer = ziko_renderer,
   wrapper,
+  base = '/',
 } = {}) {
-  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");
+  // Normalize target element safely for UI frameworks/DOM wrapper objects
+  let mountTarget = target;
+  if (target && typeof target === 'object' && 'element' in target) {
+    mountTarget = target.element;
+  }
+
+  // 1. Normalize base path
+  let cleanBase = base === '.' ? '' : base.replace(/\/$/, '');
+  if (cleanBase && !cleanBase.startsWith('/')) {
+    cleanBase = '/' + cleanBase;
   }
-  let path = decodeURIComponent(globalThis.location.pathname.replace(/\/$/, ''));
+
+  // 2. Normalize and extract current URL path
+  let rawPath = decodeURIComponent(url.replace(/\/$/, '')) || '/';
+  
+  // Strip base prefix if matched
+  if (cleanBase && rawPath.startsWith(cleanBase)) {
+    rawPath = rawPath.slice(cleanBase.length) || '/';
+  }
+
+  let currentPath = rawPath.startsWith('/') ? rawPath : '/' + rawPath;
+
+  // 3. Normalize route masks
   const routes = Object.keys(pages);
   const root = get_root(routes);
 
@@ -25,21 +52,43 @@ export async function createSPAFileBasedRouter({
   for (const route of routes) {
     const module = await pages[route]();
     const modComponent = await module.default;
-    pairs[normalize_path(route, root, extensions)] = modComponent;
+    const normalizedKey = normalize_path(route, root, extensions);
+    pairs[normalizedKey] = modComponent;
   }
 
+  // 4. Sort routes by precedence (Static -> Dynamic -> Catch-All -> Optional Catch-All)
+  const sortedRouteKeys = sort_routes(Object.keys(pairs));
+
   let mask = null;
   let component = null;
 
-  for (const [routePath, comp] of Object.entries(pairs)) {
-    if (routes_matcher(routePath, `/${path}`)) {
+  for (const routePath of sortedRouteKeys) {
+    if (routes_matcher(routePath, currentPath)) {
       mask = routePath;
-      component = comp;
+      component = pairs[routePath];
       break;
     }
   }
-  if (mask === null) return; // no route matched
-  const params = is_dynamic(mask) ? dynamic_routes_parser(mask, path) : undefined;
-  renderer(target, component, params, wrapper)
+
+  if (mask === null) {
+    return { mask: null, component: null, params: {}, matched: false };
+  }
+
+  const params = is_dynamic(mask) ? dynamic_routes_parser(mask, currentPath) : {};
+
+  // Execute renderer if a valid mount target is available
+  if (mountTarget && typeof renderer === 'function') {
+    await renderer(mountTarget, component, params, wrapper);
+  }
+
+  // Return router state for SSR/static build environments
+  return {
+    mask,
+    component,
+    params,
+    matched: true
+  };
 }
 
+// Backward-compatible alias for SPA usage
+export const createSPAFileBasedRouter = createFileBasedRouter;

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

@@ -3,9 +3,33 @@ export function dynamic_routes_parser(mask, route) {
   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];
+
+    // Handle [[...slug]]
+    if (maskSegment.startsWith("[[...") && maskSegment.endsWith("]]")) {
+      const paramName = maskSegment.slice(5, -2);
+      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 >= 0) {
+        params[paramName] = routeSegments.slice(j, j + segmentsToConsume).join("/");
+        j += segmentsToConsume;
+      } else return {};
+      i++;
+      continue;
+    }
+
+    // Handle [...slug]
     if (maskSegment.startsWith("[...") && maskSegment.endsWith("]")) {
       const paramName = maskSegment.slice(4, -1);
       const remainingMaskSegments = maskSegments.length - i - 1;
@@ -20,32 +44,42 @@ export function dynamic_routes_parser(mask, route) {
       const remainingRouteSegments = routeSegments.length - j;
       const segmentsToConsume = remainingRouteSegments - requiredSegments;
       if (segmentsToConsume >= 1) {
-        params[paramName] = routeSegments
-          .slice(j, j + segmentsToConsume)
-          .join("/");
+        params[paramName] = routeSegments.slice(j, j + segmentsToConsume).join("/");
         j += segmentsToConsume;
-      } 
-      else return {};
+      } else return {};
       i++;
       continue;
     }
+
     if (maskSegment.startsWith("[") && maskSegment.endsWith("]+")) {
       const paramName = maskSegment.slice(1, -2);
-      if (routeSegment) {
-        params[paramName] = routeSegment;
+      if (routeSegments[j]) {
+        params[paramName] = routeSegments[j];
         j++;
       }
       i++;
       continue;
     }
+
     if (maskSegment.startsWith("[") && maskSegment.endsWith("]")) {
       const paramName = maskSegment.slice(1, -1);
-      params[paramName] = routeSegment;
-    } 
-    else if (maskSegment !== routeSegment) return {};
+      params[paramName] = routeSegments[j];
+    } else if (maskSegment !== routeSegments[j]) return {};
+
     i++;
     j++;
   }
+
+  // Set default empty string for remaining uncaptured optional catch-alls
+  while (i < maskSegments.length) {
+    const maskSegment = maskSegments[i];
+    if (maskSegment.startsWith("[[...") && maskSegment.endsWith("]]")) {
+      const paramName = maskSegment.slice(5, -2);
+      if (!(paramName in params)) params[paramName] = "";
+    }
+    i++;
+  }
+
   return params;
 }
 

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

@@ -1,16 +1,24 @@
 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));
+   
+   // Strip trailing file names (e.g. /index.js or /about.js) to compare directory structures only
+   const dirPaths = paths.map(path => {
+     const parts = path.split('/');
+     parts.pop(); // Remove the filename
+     return parts;
+   });
+
+   const minLength = Math.min(...dirPaths.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('['))) {
+       const part = dirPaths[0][i]; 
+       if (dirPaths.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/normalize-path.js

@@ -1,21 +1,32 @@
 export function normalize_path(inputPath, root = './src/pages', extensions = ['js', 'ts', 'jsx', 'tsx']) {
-    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 = extensions.some(ext => lastPart === `index.${ext}`);
-        const hasValidExtension = lastPart && 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)$/, '');
-        if (hasValidExtension) {
-            const regex = new RegExp(`\\.(${extensions.join('|')})$`);
-            return '/' + subsequentParts.join('/').replace(regex, '');
-        }
+    let cleanRoot = root.endsWith('/') ? root.slice(0, -1) : root;
+    const normalizedPath = inputPath.replace(/\\/g, '/');
+    
+    // 1. Extract path relative to root
+    let relativePath = normalizedPath;
+    if (cleanRoot && normalizedPath.includes(cleanRoot)) {
+        relativePath = normalizedPath.split(cleanRoot).pop();
     }
-    return '';
- }
+
+    // 2. Split directory parts & strip route groups like (auth)
+    const rawParts = relativePath.split('/').filter(Boolean).filter(p => !/^\([^)]+\)$/.test(p));
+    if (rawParts.length === 0) return '/';
+
+    const lastPart = rawParts[rawParts.length - 1];
+    const extRegex = new RegExp(`\\.(${extensions.join('|')})$`);
+    
+    const isIndexFile = extensions.some(ext => lastPart === `index.${ext}`);
+    const fileNameWithoutExt = lastPart.replace(extRegex, '');
+
+    // Remove original file name from directory segments
+    rawParts.pop(); 
+
+    // 3. Handle flat dot notation without breaking [..slug] or [[..slug]]
+    if (!isIndexFile) {
+        // Splits by '.' ONLY if the dot is outside of bracketed patterns like [...] or [[...]]
+        const dotSegments = fileNameWithoutExt.split(/\.(?![^\[]*\])/);
+        rawParts.push(...dotSegments);
+    }
+
+    return '/' + rawParts.join('/');
+}

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

@@ -1,7 +1,34 @@
 export function is_dynamic(path) {
-  const DynamicPattern = /(:\w+|\[\.\.\.\w+\]|\[\w+\]\+?)/;
+  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: {},

package/src/router/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