ziko 2.0.0-beta.15 → 2.0.0-beta.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16.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/dom/UIElement/index.js

@@ -1,9 +1,9 @@
 import { UIElement as UIElementCore } from "../../mini-dom/UIElement/index.js";
 import { register_to_class } from "../../internal-utils/register/register-to-class.js";
-import { 
+import {
   // LifecycleMethods,
   AttrsMethods,
-  DomMethods,
+  // DomMethods,
   // IndexingMethods,
   // StyleMethods,
 } from "../../mini-dom/mixins/index.js";
@@ -14,21 +14,26 @@ import {
   ClickListeners,
   KeyListeners,
   ViewListeners,
-} from '../../events/index.js'
+} from "../../events/index.js";
 import { isStateGetter } from "../../hooks/use-state.js";
-class UIElement extends UIElementCore{
-  constructor({element, name ='', type = 'html', render = __Ziko__.__Config__.default.render, props}={}){
-    super()
+import { text } from "../../mini-dom/text/index.js";
+export class UIElement extends UIElementCore {
+  constructor({
+    element,
+    name = "",
+    type = "html",
+    render = __Ziko__.__Config__.default.render,
+    props,
+  } = {}) {
+    super();
     this.exp = {
-      events : {
-
-      }
-    }
+      events: {},
+    };
     register_to_class(
-      this, 
+      this,
       // LifecycleMethods,
-      AttrsMethods, 
-      DomMethods, 
+      AttrsMethods,
+      // DomMethods,
       // StyleMethods,
       // IndexingMethods,
       PtrListeners,
@@ -37,80 +42,100 @@ class UIElement extends UIElementCore{
       ViewListeners,
     );
 
-    if(element) this.init({element, name, type, render, props});
-  }
-  on(event_name, callback, {details_setter, category = 'global', isCustom = false, preventDefault = false} = {}){
-    if(event_name instanceof Array) event_name.forEach(
-      event => this.on(
-        event, 
-        callback, 
-        {details_setter, category, isCustom, preventDefault}
-      )
-    )
-    if(category && !this.exp.events.hasOwnProperty(category)) this.exp.events[category] = new EventController(this, category);
-    isCustom && this.exp.events[category].cache.customEvents.add(event_name)
+    if (element) this.init({ element, name, type, render, props });
+  }
+  on(
+    event_name,
+    callback,
+    {
+      details_setter,
+      category = "global",
+      isCustom = false,
+      preventDefault = false,
+    } = {},
+  ) {
+    if (event_name instanceof Array)
+      event_name.forEach((event) =>
+        this.on(event, callback, {
+          details_setter,
+          category,
+          isCustom,
+          preventDefault,
+        }),
+      );
+    if (category && !this.exp.events.hasOwnProperty(category))
+      this.exp.events[category] = new EventController(this, category);
+    isCustom && this.exp.events[category].cache.customEvents.add(event_name);
     const EVENT = this.exp.events[category];
-    EVENT.addListener(event_name, (e)=>{
-      if(details_setter) details_setter(EVENT);
-      callback(e)
-    },{
-      preventDefault
-    });
+    EVENT.addListener(
+      event_name,
+      (e) => {
+        if (details_setter) details_setter(EVENT);
+        callback(e);
+      },
+      {
+        preventDefault,
+      },
+    );
     return this;
   }
-  off(event, category = 'global'){
+  off(event, category = "global") {
     this.exp.events[category].removeListener(event);
-    return this
+    return this;
   }
-  get element(){
+  get element() {
     return this.cache.element;
   }
-  get itemsTarget(){
-    return this.cache.itemsTarget; 
+  get itemsTarget() {
+    return this.cache.itemsTarget;
   }
-  get itemsTargetElement(){
+  get itemsTargetElement() {
     return this.itemsTarget.element;
   }
-  setItemsTarget(parent){
+  setItemsTarget(parent) {
     this.cache.itemsTarget = parent;
     this.items = parent.items;
     return this;
   }
-  isInteractive(){
+  isInteractive() {
     return this.cache.isInteractive;
   }
-  useClient(directive){
-    if(!this.cache.isInteractive){
-      this.element.setAttribute('data-hydration-index', globalThis.__Ziko__.__HYDRATION__.index);
+  useClient(directive) {
+    if (!this.cache.isInteractive) {
+      this.element.setAttribute(
+        "data-hydration-index",
+        globalThis.__Ziko__.__HYDRATION__.index,
+      );
       globalThis.__Ziko__.__HYDRATION__.register(() => this.constructor);
       this.cache.isInteractive = true;
     }
-    if(directive)this.element.setAttribute('data-hydration-directive', directive);
+    if (directive)
+      this.element.setAttribute("data-hydration-directive", directive);
     return this;
   }
   // get st(){
   //   return this.cache.style;
   // }
-  get attr(){
+  get attr() {
     return this.cache.attributes;
   }
-  get evt(){
+  get evt() {
     return this.events;
   }
-  get html(){
+  get html() {
     return this.element.innerHTML;
   }
-  get text(){
+  get text() {
     return this.element.textContent;
   }
   // get isBody(){
   //   return this.element === globalThis?.document.body;
   // }
-  get parent(){
+  get parent() {
     return this.cache.parent;
   }
-  get rect(){
-    return this.element.getBoundingClientRect()
+  get rect() {
+    return this.element.getBoundingClientRect();
   }
   // get width(){
   //   return this.element.getBoundingClientRect().width;
@@ -142,19 +167,19 @@ class UIElement extends UIElementCore{
   }
   unmount() {
     if (this.cache.parent) {
-        this.cache.parent.remove(this);
-    } 
-    else if (
-        this.target?.children?.length &&
-        [...this.target.children].includes(this.element)
-    )this.target.removeChild(this.element);
+      this.cache.parent.remove(this);
+    } else if (
+      this.target?.children?.length &&
+      [...this.target.children].includes(this.element)
+    )
+      this.target.removeChild(this.element);
     return this;
   }
 
   // Indexing
 
   at(index) {
-  return this.items.at(index);
+    return this.items.at(index);
   }
   forEach(callback) {
     this.items.forEach(callback);
@@ -166,35 +191,104 @@ class UIElement extends UIElementCore{
   find(condition) {
     return this.items.filter(condition);
   }
-  // Styling  
-  style(styles){
-    if(!this.element?.style) return this;
-    for(let key in styles){
+  // Styling
+  style(styles) {
+    if (!this.element?.style) return this;
+    for (let key in styles) {
       const value = styles[key];
-      if(isStateGetter(value)){
-        const getter = value()
-        Object.assign(this.element.style, {[key] : getter.value})
+      if (isStateGetter(value)) {
+        const getter = value();
+        Object.assign(this.element.style, { [key]: getter.value });
         getter._subscribe(
           (newValue) => {
-            Object.assign(this.element.style, {[key] : newValue})
+            Object.assign(this.element.style, { [key]: newValue });
           },
-          // this 
+          // this
         );
-      }
-      else Object.assign(this.element.style, {[key] : value})
+      } else Object.assign(this.element.style, { [key]: value });
     }
     return this;
   }
-  size(width, height){
-    return this.style({width, height})
+  size(width, height) {
+    return this.style({ width, height });
   }
-  hide(){
+  hide() {}
+  show() {}
 
-  }
-  show(){
+  // Dom
 
+  append(...ele) {
+    this.__addItems__("append", "push", ...ele);
+    return this;
   }
+  prepend(...ele) {
+    this.this.__addItems__("prepend", "unshift", ...ele);
+    return this;
+  }
+  insertAt(index, ...ele) {
+    const target = this.itemsTarget;
+    if (index >= target.items.length) return this.append(...ele);
+    for (let i = 0; i < ele.length; i++) {
+      if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+      target.element?.insertBefore(ele[i].element, target.items[index].element);
+      target.items.splice(index, 0, ele[i]);
+    }
+    target.maintain();
+    return this;
+  }
+  remove(...ele) {
+    const remove = (ele) => {
+      if (typeof ele === "number") ele = this.items[ele];
+      if (ele?.isUIElement) this.itemsTarget.element?.removeChild(ele.element);
+      this.items = this.items.filter((n) => n !== ele);
+    };
+    for (let i = 0; i < ele.length; i++) remove(ele[i]);
+    for (let i = 0; i < this.items.length; i++)
+      Object.assign(this, { [[i]]: this.items[i] });
+    // Remove from item
+    return this;
+  }
+
+  async __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 = 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 UIElement({element : 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;
+    }
+  }
 
+  async __addItems__(adder, pusher, ...elements) {
+    for (const item of elements) {
+      await this.__addItem__(adder, pusher, item);
+    }
+    this.maintain();
+    return this;
+  }
 }
-export { UIElement }

package/src/dom/tags/index.js

@@ -13,15 +13,17 @@ export const tags = new Proxy({}, {
     if(SVGTags.includes(tag)) type = 'svg';
     if(MathMLTags.includes(tag)) type = 'mathml';
     return (...args) => {
+      const ui = new UIElement({element : tag, name : tag, type});
+      const first = args[0]
       if(args.length === 0) {
-        return new UIElement({element : tag, name : tag, type})
+        return ui
       }
       if(
-        ['string', 'number'].includes(typeof args[0]) 
-        || args[0] instanceof UIElement 
-        || isStateGetter(args[0])
-        || args[0] instanceof HTMLElement
-      ) return new UIElement({element : tag, name : tag, type}).append(...args);
+        ['string', 'number'].includes(typeof first) 
+        || first instanceof UIElement 
+        || isStateGetter(first)
+        || first instanceof HTMLElement
+      ) return ui.append(...args);
       return new UIElement({element : tag, type, props : args.shift()}).append(...args)
     }
   }

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, '-');