ziko 2.0.0-beta.14 → 2.0.0-beta.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15.1",
   "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

@@ -62,12 +62,17 @@ export async function __addItem__(adder, pusher, item, referenceNode = null, ind
   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
-    );
-  }
+    item = getter.value;
+
+    getter._subscribe((newValue) => {
+        if (newValue?.isUIElement?.()) {
+            item.element.replaceWith(newValue.element);
+            item = newValue;
+        } else {
+            item.element.textContent = newValue;
+        }
+    });
+}
   if (typeof globalThis?.Node === "function" && item instanceof globalThis.Node)
     item = new this.constructor(item);
   if (item instanceof Promise) item = await item;

package/src/router/file-based-router/index.d.ts

@@ -1,24 +1,84 @@
-// createSPAFileBasedRouter.d.ts
-
 import { UIElement } from '../../dom/UIElement'
+import type { UILayout } from '../../Layout'
+
+export type Component<T = unknown> =
+  | ((params?: Record<string, string>) => T)
+  | T
+  | T[]
+
+export type Renderer<TComponent = unknown, TTarget = unknown> = (
+  target: TTarget,
+  component: TComponent | TComponent[] | null,
+  params: Record<string, string>,
+  wrapper?: unknown
+) => void | Promise<void>
+
+export interface CreateFileBasedRouterOptions<
+  TComponent = unknown,
+  TTarget = unknown
+> {
+  pages?: Record<
+    string,
+    () => Promise<{
+      default: (params?: Record<string, string>) => TComponent
+      [key: string]: unknown
+    }>
+  >
+
+  target?: TTarget | null
+
+  extensions?: string[]
+
+  renderer?: Renderer<TComponent, TTarget>
+
+  wrapper?: unknown
+
+  lazy?: boolean
+
+  base?: string
+
+  url?: string
+
+  namedExportHandler?: Record<
+    string,
+    (
+      exportedFn: unknown,
+      context: {
+        route: string | null
+        mask: string | null
+        module: unknown
+        currentPath: string
+        params: Record<string, string>
+      }
+    ) => unknown | Promise<unknown>
+  >
+}
+
+export interface FileBasedRouterResult<TComponent = unknown> {
+  mask: string | null
+  component: TComponent | null
+  params: Record<string, string>
+  namedExports?: Record<string, unknown>
+  matched: boolean
+  error?: unknown
+}
+
+export declare function _createFileBasedRouter<
+  TComponent = unknown,
+  TTarget = unknown
+>(
+  options?: CreateFileBasedRouterOptions<TComponent, TTarget>
+): Promise<FileBasedRouterResult<TComponent>>
+
+
+export type ZikoComponent =
+  | UIElement
+  | UIElement[]
+  | UILayout
 
-/**
- * Creates a SPA (Single Page Application) file-based router.
- * Automatically loads and mounts the component corresponding to the current path.
- * Supports dynamic routes and parameter extraction.
- *
- * @param pages - An object mapping route paths to async module functions that return a component.
- *                Example: { "/user/[id]": () => import("./pages/user/[id].js") }
- * @param target - Optional DOM element to mount the component. Defaults to `document.body`.
- */
-export function createSPAFileBasedRouter(
-  options : {
-    pages: Record<
-      string, 
-      () => Promise<{ default: (param? : Record<string, string>) => UIElement | UIElement[]}>
-    >,
-    target?: HTMLElement | UIElement
-    extensions : string[],
-    wrapper : Function
-  },
-): Promise<void>;
+export declare function createFileBasedRouter(
+  options?: CreateFileBasedRouterOptions<
+    ZikoComponent,
+    HTMLElement | UIElement
+  >
+): Promise<FileBasedRouterResult<ZikoComponent>>

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

@@ -161,7 +161,4 @@ export async function createFileBasedRouter({
     namedExports,
     matched: true
   };
-}
-
-// Backward-compatible alias for SPA usage
-export const createSPAFileBasedRouter = createFileBasedRouter;
+}

package/src/string/converters/index.js

@@ -1,24 +1,62 @@
-export const camel2hyphencase = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
-export const camel2snakecase = (text = '') => text.replace(/[A-Z]/g, match => '_' + match.toLowerCase());
+export const camel2hyphencase = (text = '') =>
+  text.replace(/[A-Z]/g, (match, index) =>
+    index ? `-${match.toLowerCase()}` : match.toLowerCase()
+  );
+export const camel2snakecase = (text = '') =>
+  text.replace(/[A-Z]/g, (match, index) =>
+    index ? `_${match.toLowerCase()}` : match.toLowerCase()
+  );
 export const camel2pascalcase = (text = '') => text.charAt(0).toUpperCase() + text.slice(1);
-export const camel2constantcase = (text = '') => text.replace(/[A-Z]/g, match => '_' + match).toUpperCase();
+export const camel2constantcase = (text = '') => text
+    .replace(/[A-Z]/g, (match, index) =>
+      index ? `_${match}` : match
+    )
+    .toUpperCase();
 
-export const pascal2snakecase = (text = '') => text.replace(/([A-Z])/g, (match, _, offset) => offset ? '_' + match.toLowerCase() : match.toLowerCase());
-export const pascal2hyphencase = (text = '') => text.replace(/([A-Z])/g, (match, _, offset) => offset ? '-' + match.toLowerCase() : match.toLowerCase());
-export const pascal2constantcase = (text = '') => text.replace(/([A-Z])/g, (match, _, offset) => offset ? '_' + match : match).toUpperCase();
+
+export const pascal2snakecase = (text = '') =>
+  text.replace(/[A-Z]/g, (match, offset) =>
+    offset === 0
+      ? match.toLowerCase()
+      : `_${match.toLowerCase()}`
+  );
+
+export const pascal2hyphencase = (text = '') =>
+  text.replace(/[A-Z]/g, (match, offset) =>
+    offset === 0
+      ? match.toLowerCase()
+      : `-${match.toLowerCase()}`
+  );
+
+export const pascal2constantcase = (text = '') =>
+  text
+    .replace(/[A-Z]/g, (match, offset) =>
+      offset === 0 ? match : `_${match}`
+    )
+    .toUpperCase();
 export const pascal2camelcase = (text = '') => text.charAt(0).toLowerCase() + text.slice(1);
 
-export const snake2camelcase = (text = '') => text.replace(/(_\w)/g, match => match[1].toUpperCase());
-export const snake2hyphencase = (text = '') => text.replace(/_/g, "-");
-export const snake2pascalcase = (text = '') => text.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+export const snake2camelcase = (text = '') => text.replace(/_([a-zA-Z])/g, (_, char) => char.toUpperCase());
+export const snake2hyphencase = (text = '') => text.replace(/_/g, '-');
+export const snake2pascalcase = (text = '') => text
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
 export const snake2constantcase = (text = '') => text.toUpperCase();
 
-export const hyphen2camelcase = (text = '') => text.replace(/-([a-z])/g, match => match[1].toUpperCase());
+export const hyphen2camelcase = (text = '') => text.replace(/-([a-zA-Z])/g, (_, char) => char.toUpperCase());
 export const hyphen2snakecase = (text = '') => text.replace(/-/g, '_');
-export const hyphen2pascalcase = (text = '') => text.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+export const hyphen2pascalcase = (text = '') => text
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
 export const hyphen2constantcase = (text = '') => text.replace(/-/g, '_').toUpperCase();
 
-export const constant2camelcase = (text = '') => text.toLowerCase().replace(/_([a-z])/g, match => match[1].toUpperCase());
+export const constant2camelcase = (text = '') => text.toLowerCase().replace(/_([a-z])/g, (_, char) => char.toUpperCase());
 export const constant2snakecase = (text = '') => text.toLowerCase();
-export const constant2pascalcase = (text = '') => text.toLowerCase().split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+export const constant2pascalcase = (text = '') => text
+    .toLowerCase()
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
 export const constant2hyphencase = (text = '') => text.toLowerCase().replace(/_/g, '-');