ziko 2.0.0-beta.2 → 2.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "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/mini-dom/mixins/dom.js

@@ -1,11 +1,11 @@
 import { text } from "../text/index.js";
 import { isStateGetter } from "../../hooks/use-state.js";
 export function append(...ele) {
-  __addItem__.call(this, "append", "push", ...ele);
+  __addItems__.call(this, "append", "push", ...ele);
   return this;
 }
 export function prepend(...ele) {
-  this.__addItem__.call(this, "prepend", "unshift", ...ele);
+  this.__addItems__.call(this, "prepend", "unshift", ...ele);
   return this;
 }
 export function insertAt(index, ...ele) {
@@ -47,58 +47,46 @@ export function replaceElementWith(new_element){
     return this
 }
 export function after(ui){
-  if(ui?.isUIElement) ui=ui.element;
+  if(ui?.isUIElement) ui = ui.element;
   this.itemsTarget.element?.after(ui)
   return this;
 }
 export function before(ui){
-  if(ui?.isUIElement) ui=ui.element;
+  if(ui?.isUIElement) ui = ui.element;
   this.itemsTarget.element?.before(ui)
   return this;
 }
-export async function __addItem__(adder, pusher, ...ele) {
-  const itemsTarget_el = this.itemsTarget.element;
-  const itemsTarget = this.itemsTarget
-  if (this.cache.isFrozzen) {
-    console.warn("You can't append new item to frozzen element");
-    return this;
+
+export async function __addItem__(adder, pusher, item, referenceNode = null, index = null) {
+  const { element: itemsTargetEl, items } = this.itemsTarget;
+  if (["number", "string"].includes(typeof item)) item = text(item);
+  if (typeof item === "function" && isStateGetter(item)) {
+    const getter = item();
+    item = text(getter.value);
+    getter._subscribe(
+      (newValue) => { item.element.textContent = newValue; },
+      item
+    );
   }
-  for (let i = 0; i < ele.length; i++) {
-    if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-        // Fix Items Latter
-    if (ele[i] instanceof Function) {
-      if (isStateGetter(ele[i])) {
-        const getter = ele[i]();
-        ele[i] = text(getter.value);
-        getter._subscribe(
-            (newValue) => (ele[i].element.textContent = newValue),
-            ele[i] 
-        );
-        // this.itemsTarget.element.appendChild(textNode);
-      }
-    }
-    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
-    if (ele[i]?.isUINode) {
-        ele[i].cache.parent = this;
-        itemsTarget_el?.[adder](ele[i].element);
-        ele[i].target = this.itemsTarget.element;
-        itemsTarget.items[pusher](ele[i]);
-    } 
-    else if(ele[i] instanceof Promise){
-      const UIEle = await ele[i]
-      UIEle.cache.parent = this;
-      itemsTarget_el?.[adder](UIEle.element);
-      UIEle.target = this.itemsTarget.element;
-      itemsTarget.items[pusher](UIEle)
-    }
-    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) =>
-          this.setAttr("" + n[0], n[1]),
-        );
-      }
-    }
+  if (typeof globalThis?.Node === "function" && item instanceof globalThis.Node)
+    item = new this.constructor(item);
+  if (item instanceof Promise) item = await item;
+  if (item?.isUINode) {
+    item.cache.parent = this;
+    item.target = itemsTargetEl;
+    if (adder === "insertBefore" && itemsTargetEl) 
+      itemsTargetEl.insertBefore(item.element, referenceNode);
+    else if (typeof itemsTargetEl?.[adder] === "function") 
+      itemsTargetEl[adder](item.element);
+    if (pusher === "splice" && index !== null) items.splice(index, 0, item);
+    else if (typeof items?.[pusher] === "function") items[pusher](item);
+    return;
+  }
+}
+
+export async function __addItems__(adder, pusher, ...elements) {
+  for (const item of elements) {
+    await this.__addItem__(adder, pusher, item);
   }
   this.maintain();
   return this;

package/src/mini-dom/mixins/lifecycle.js

@@ -3,12 +3,9 @@ export function mount(target = this.target, 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;
 }
@@ -18,7 +15,6 @@ export function unmount(delay = 0) {
         setTimeout(() => this.unmount(0), delay);
         return this;
     }
-
     if (this.cache.parent) {
         this.cache.parent.remove(this);
     } else if (

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

@@ -1,5 +1,3 @@
-// file-based-router/index.js
-
 import { 
     get_root,
     normalize_path,
@@ -10,17 +8,21 @@ import {
     renderer as ziko_renderer
 } from "../internal-utils/index.js";
 
-/**
- * Environment-independent file-based router core
- */
 export async function createFileBasedRouter({
   pages = {},
   url = typeof location !== 'undefined' ? location.pathname : '/',
   target = typeof document !== 'undefined' ? document.body : null,
   extensions = ['js', 'ts'],
+  base = '/',
   renderer = ziko_renderer,
   wrapper,
-  base = '/',
+  namedExportHandler = {
+    Get: async (exportedFn, context) => {
+      if (typeof exportedFn === 'function') {
+        return await exportedFn(context);
+      }
+    }
+  }
 } = {}) {
   // Normalize target element safely for UI frameworks/DOM wrapper objects
   let mountTarget = target;
@@ -44,16 +46,20 @@ export async function createFileBasedRouter({
 
   let currentPath = rawPath.startsWith('/') ? rawPath : '/' + rawPath;
 
-  // 3. Normalize route masks
+  // 3. Normalize route masks and collect modules
   const routes = Object.keys(pages);
   const root = get_root(routes);
 
   const pairs = {};
+  const modules = {};
+
   for (const route of routes) {
     const module = await pages[route]();
     const modComponent = await module.default;
     const normalizedKey = normalize_path(route, root, extensions);
+    
     pairs[normalizedKey] = modComponent;
+    modules[normalizedKey] = { module, rawRoute: route };
   }
 
   // 4. Sort routes by precedence (Static -> Dynamic -> Catch-All -> Optional Catch-All)
@@ -76,7 +82,21 @@ export async function createFileBasedRouter({
 
   const params = is_dynamic(mask) ? dynamic_routes_parser(mask, currentPath) : {};
 
-  // Execute renderer if a valid mount target is available
+  if (mask in modules) {
+    const { module, rawRoute } = modules[mask];
+    for (const exportName in namedExportHandler) {
+      if (exportName in module && typeof namedExportHandler[exportName] === 'function') {
+        await namedExportHandler[exportName](module[exportName], {
+          route: rawRoute,
+          mask,
+          module,
+          currentPath,
+          params
+        });
+      }
+    }
+  }
+
   if (mountTarget && typeof renderer === 'function') {
     await renderer(mountTarget, component, params, wrapper);
   }