ziko 2.0.0-beta.1 → 2.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.3",
   "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/app/Page/index.d.ts

@@ -0,0 +1,7 @@
+import type { UIElement } from "../../dom/UIElement";
+import type { UILayout, UILayoutOptions } from "../Layout/index.d.ts";
+
+export function Page(
+  options?: UILayoutOptions,
+  ...ui: UIElement[]
+): () => UILayout;

package/src/app/Page/index.js

@@ -0,0 +1,5 @@
+import { UILayout } from '../Layout/index.js';
+
+export function Page(options, ...ui){
+    return () => new UILayout(options, ...ui)
+}

package/src/app/index.d.ts

@@ -1 +1,2 @@
-export type * from './Layout/index.d.ts'
+export type * from './Layout/index.d.ts'
+export type * from './Page/index.d.ts'

package/src/app/index.js

@@ -1 +1,2 @@
-export * from './Layout/index.js'
+export * from './Layout/index.js'
+export * from './Page/index.js'

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);
   }

package/src/router/internal-utils/renderer.js

@@ -1,7 +1,13 @@
+import { UILayout } from "../../app";
+
 export const renderer = async (target, component, props, wrapper) =>{
     if(!component) return;
     let mounted = await component(props);
     if(wrapper) mounted = wrapper(mounted);
+
+    if(mounted instanceof UILayout) 
+        return mounted.ui.forEach(el => el.mount(target))
+    
     mounted instanceof Array 
         ? mounted.forEach(el => el.mount(target)) 
         : mounted.mount(target);