ziko 0.63.2 → 0.65.0

package/src/--reactivity-deprecated/idea

@@ -1,2 +1 @@
-useTypeWritter 
-useValueToggler
+useTypeWritter 

package/src/data/api/fetchdom.js

@@ -1,30 +1,30 @@
-import { preload } from "./preload";
+// import { preload } from "./preload";
 
-async function fetchdom(url='https://github.com/zakarialaoui10') {
-  try {
-    const response = await fetch(url);
-    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-    const html = await response.text();
-    const dom = new DOMParser().parseFromString(html, 'text/html');
-    return dom.documentElement;
-  } catch (err) {
-    console.error('Failed to fetch DOM:', err);
-    throw err;
-  }
-}
+// async function fetchdom(url='https://github.com/zakarialaoui10') {
+//   try {
+//     const response = await fetch(url);
+//     if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+//     const html = await response.text();
+//     const dom = new DOMParser().parseFromString(html, 'text/html');
+//     return dom.documentElement;
+//   } catch (err) {
+//     console.error('Failed to fetch DOM:', err);
+//     throw err;
+//   }
+// }
 
-function fetchdomSync(url='https://github.com/zakarialaoui10') {
-  try {
-    const data = preload(url);
-    const dom = new DOMParser().parseFromString(data, 'text/html');
-    return dom.documentElement;
-  } catch (err) {
-    console.error('Failed to fetch DOM synchronously:', err);
-    throw err;
-  }
-}
+// function fetchdomSync(url='https://github.com/zakarialaoui10') {
+//   try {
+//     const data = preload(url);
+//     const dom = new DOMParser().parseFromString(data, 'text/html');
+//     return dom.documentElement;
+//   } catch (err) {
+//     console.error('Failed to fetch DOM synchronously:', err);
+//     throw err;
+//   }
+// }
 
-export { 
-  fetchdom, 
-  fetchdomSync 
-};
+// export { 
+//   fetchdom, 
+//   fetchdomSync 
+// };

package/src/data/api/index.js

@@ -1,4 +1,4 @@
-export { preload } from "./preload";
-import { fetchdom ,fetchdomSync } from "./fetchdom";
-globalThis.fetchdom=fetchdom
-globalThis.fetchdomSync=fetchdomSync
+// export { preload } from "./preload";
+// import { fetchdom ,fetchdomSync } from "./fetchdom";
+// globalThis.fetchdom=fetchdom
+// globalThis.fetchdomSync=fetchdomSync

package/{types → src}/router/file-based-router/index.d.ts

@@ -19,6 +19,6 @@ export function createSPAFileBasedRouter(
     >,
     target?: HTMLElement | UIElement
     extensions : string[],
-    domifier : Function
+    wrapper : Function
   },
 ): Promise<void>;

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

@@ -3,14 +3,15 @@ import {
     normalize_path,
     routes_matcher,
     is_dynamic,
-    dynamic_routes_parser
+    dynamic_routes_parser,
+    renderer as ziko_renderer
  } from "../utils/index.js"
 export async function createSPAFileBasedRouter({
   pages = {},
   target = globalThis?.document?.body,
   extensions = ['js', 'ts'],
-  domifier = null,
-  renderer
+  renderer = ziko_renderer,
+  wrapper,
 } = {}) {
   if(!(target instanceof HTMLElement) && target?.element instanceof HTMLElement) target = target?.element;
   if (!(target instanceof HTMLElement)) {
@@ -39,31 +40,6 @@ export async function createSPAFileBasedRouter({
   }
   if (mask === null) return; // no route matched
   const params = is_dynamic(mask) ? dynamic_routes_parser(mask, path) : undefined;
-  if(renderer) {
-    renderer(target, component, params)
-    return;
-  }
-
-
-  let mounted = domifier
-        ? await domifier(component, params)
-        : await component(params)
-  // // let mounted 
-  // if(domifier) {
-  //   mounted = await domifier(component, params);
-  //   target.append(mounted)
-  // }
-  // console.log({component})
-
-  // return;
-  // const mounted = params ? await component(params) : await component();
-
-  if(mounted instanceof HTMLElement) 
-      mounted instanceof Array 
-        ? target.append(...mounted) 
-        : target.append(mounted);
-  else mounted instanceof Array 
-        ? mounted.forEach(el => el.mount(target)) 
-        : mounted.mount(target);
-
+  renderer(target, component, params, wrapper)
 }
+

package/src/router/utils/index.js

@@ -2,4 +2,5 @@ export * from './normalize-path.js'
 export * from './routes-matcher.js'
 export * from './routes-grouper.js'
 export * from './dynamic-routes-parser.js'
-export * from './get-root.js'
+export * from './get-root.js'
+export * from './renderer.js'

package/src/router/utils/renderer.js

@@ -0,0 +1,8 @@
+export const renderer = async (target, component, props, wrapper) =>{
+    if(!component) return;
+    let mounted = await component(props);
+    if(wrapper) mounted = wrapper(mounted);
+    mounted instanceof Array 
+        ? mounted.forEach(el => el.mount(target)) 
+        : mounted.mount(target);
+}

package/types/data/api/index.d.ts

@@ -1,15 +0,0 @@
-// fetchdom.d.ts
-
-/**
- * Fetches a URL and parses it into a DOM Document asynchronously.
- * @param url The URL to fetch. Defaults to 'https://github.com/zakarialaoui10'.
- * @returns A Promise resolving to the root element of the parsed DOM.
- */
-export function fetchdom(url?: string): Promise<Element>;
-
-/**
- * Fetches a URL synchronously (using `preload`) and parses it into a DOM Document.
- * @param url The URL to fetch. Defaults to 'https://github.com/zakarialaoui10'.
- * @returns The root element of the parsed DOM.
- */
-export function fetchdomSync(url?: string): Element;

package/types/data/index.d.ts

@@ -1 +0,0 @@
-export type * from './api/index.d.ts'

package/types/data/string/checkers.d.ts

@@ -1,51 +0,0 @@
-// stringUtils.d.ts
-
-/**
- * Checks if a string is in camelCase.
- * @param text The string to check. Defaults to empty string.
- * @returns True if the string is camelCase, false otherwise.
- */
-export function is_camelcase(text?: string): boolean;
-
-/**
- * Checks if a string contains hyphens (hyphen-case).
- * @param text The string to check. Defaults to empty string.
- * @returns True if the string contains hyphens, false otherwise.
- */
-export function is_hyphencase(text?: string): boolean;
-
-/**
- * Checks if a string contains underscores (snake_case).
- * @param text The string to check. Defaults to empty string.
- * @returns True if the string contains underscores, false otherwise.
- */
-export function is_snakeCase(text?: string): boolean;
-
-/**
- * Checks if a string is in PascalCase.
- * @param text The string to check. Defaults to empty string.
- * @returns True if the string is PascalCase, false otherwise.
- */
-export function is_pascalcalse(text?: string): boolean;
-
-/**
- * Checks if a string is a palindrome (case-insensitive).
- * @param text The string to check.
- * @returns True if the string is a palindrome, false otherwise.
- */
-export function is_palindrome(text: string): boolean;
-
-/**
- * Checks if two words are anagrams of each other.
- * @param word The first word.
- * @param words The second word.
- * @returns True if the words are anagrams, false otherwise.
- */
-export function is_anagram(word: string, words: string): boolean;
-
-/**
- * Checks if a string is an isogram (no repeating letters, case-insensitive).
- * @param text The string to check. Defaults to empty string.
- * @returns True if the string is an isogram, false otherwise.
- */
-export function is_isogram(text?: string): boolean;

package/types/data/string/converters.d.ts

@@ -1,101 +0,0 @@
-/**
- * Converts camelCase to hyphen-case.
- * @param text The camelCase string. Defaults to ''.
- * @returns The converted hyphen-case string.
- */
-export function camel2hyphencase(text?: string): string;
-
-/**
- * Converts camelCase to snake_case.
- */
-export function camel2snakecase(text?: string): string;
-
-/**
- * Converts camelCase to PascalCase.
- */
-export function camel2pascalcase(text?: string): string;
-
-/**
- * Converts camelCase to CONSTANT_CASE.
- */
-export function camel2constantcase(text?: string): string;
-
-/**
- * Converts PascalCase to snake_case.
- */
-export function pascal2snakecase(text?: string): string;
-
-/**
- * Converts PascalCase to hyphen-case.
- */
-export function pascal2hyphencase(text?: string): string;
-
-/**
- * Converts PascalCase to camelCase.
- */
-export function pascal2camelcase(text?: string): string;
-
-/**
- * Converts PascalCase to CONSTANT_CASE.
- */
-export function pascal2constantcase(text?: string): string;
-
-/**
- * Converts snake_case to camelCase.
- */
-export function snake2camelcase(text?: string): string;
-
-/**
- * Converts snake_case to hyphen-case.
- */
-export function snake2hyphencase(text?: string): string;
-
-/**
- * Converts snake_case to PascalCase.
- */
-export function snake2pascalcase(text?: string): string;
-
-/**
- * Converts snake_case to CONSTANT_CASE.
- */
-export function snake2constantcase(text?: string): string;
-
-/**
- * Converts hyphen-case to camelCase.
- */
-export function hyphen2camelcase(text?: string): string;
-
-/**
- * Converts hyphen-case to snake_case.
- */
-export function hyphen2snakecase(text?: string): string;
-
-/**
- * Converts hyphen-case to PascalCase.
- */
-export function hyphen2pascalcase(text?: string): string;
-
-/**
- * Converts hyphen-case to CONSTANT_CASE.
- */
-export function hyphen2constantcase(text?: string): string;
-
-/**
- * Converts CONSTANT_CASE to camelCase.
- */
-export function constant2camelcase(text?: string): string;
-
-/**
- * Converts CONSTANT_CASE to snake_case.
- */
-export function constant2snakecase(text?: string): string;
-
-/**
- * Converts CONSTANT_CASE to PascalCase.
- */
-export function constant2pascalcase(text?: string): string;
-
-/**
- * Converts CONSTANT_CASE to hyphen-case.
- */
-export function constant2hyphencase(text?: string): string;

package/types/data/string/index.d.ts

@@ -1,2 +0,0 @@
-export type * from './checkers.d.ts'
-export type * from './converters.d.ts'

package/types/global.d.ts

@@ -1,10 +0,0 @@
-export {}
-
-declare global{
-    const __Ziko__ : {
-        __UI__ : {},
-        __HYDRATION__ : {},
-        __STATE__ : {},
-        __CONFIG__ : {}
-    }
-}

package/types/hooks/index.d.ts

@@ -1,11 +0,0 @@
-export type * from './use-ipc'
-export type * from './use-storage.d.ts'
-export type * from './use-state.d.ts'
-export type * from './use-derived.d.ts'
-export type * from './use-reactive.d.ts'
-export type * from './use-Thread.d.ts'
-export type * from './use-event-emitter.d.ts'
-export type * from './use-media-query.d.ts'
-export type * from './use-title.d.ts'
-export type * from './use-favicon.d.ts'
-export type * from './use-root.d.ts'

package/types/hooks/use-Thread.d.ts

@@ -1,33 +0,0 @@
-// use-thread.d.ts
-
-export declare class UseThread {
-    constructor();
-
-    /**
-     * Call a function inside the worker.
-     * @param func - Function to execute (cannot capture outer scope)
-     * @param callback - Callback receiving (result, error)
-     * @param args - Optional arguments array to pass to the function
-     * @param close - Automatically close the worker after execution (default true)
-     */
-    call<T = any>(
-        func: (...args: any[]) => T,
-        callback: (result: T | null, error: string | null) => void,
-        args?: any[],
-        close?: boolean
-    ): this;
-
-    /** Terminate the worker manually */
-    terminate(): void;
-}
-
-/**
- * Helper function for single-use worker threads.
- * Immediately executes the function and returns the UseThread instance.
- */
-export declare const useThread: <T = any>(
-    func: (...args: any[]) => T,
-    callback: (result: T | null, error: string | null) => void,
-    args?: any[],
-    close?: boolean
-) => UseThread;

package/types/hooks/use-derived.d.ts

@@ -1,14 +0,0 @@
-export function useDerived<T>(
-    deriveFn: (...values: any[]) => T,
-    sources: Array<
-        () => {
-            value: any;
-            isStateGetter: () => true;
-            _subscribe: (fn: (value: any) => void) => void;
-        }
-    >
-): () => {
-    value: T;
-    isStateGetter: () => true;
-    _subscribe: (fn: (value: T) => void) => void;
-};

package/types/hooks/use-event-emitter.d.ts

@@ -1,46 +0,0 @@
-declare class UseEventEmitter {
-    constructor(maxListeners?: number);
-
-    /**
-     * Register and listen for an event.
-     * The listener will be called every time the event is emitted.
-     */
-    on(event: string, listener: (...args: any[]) => void): this;
-
-    /**
-     * Register and listen for an event ONCE.
-     * After the first call, the listener is automatically removed.
-     */
-    once(event: string, listener: (...args: any[]) => void): this;
-
-    /**
-     * Remove a specific listener.
-     */
-    off(event: string, listener: (...args: any[]) => void): this;
-
-    /**
-     * Emit an event and call all listeners associated with it.
-     * Returns true if the event had listeners; otherwise false.
-     */
-    emit(event: string, data?: any): boolean;
-
-    /**
-     * Remove all listeners for a specific event.
-     */
-    remove(event: string): this;
-
-    /**
-     * Clear all events and their listeners.
-     */
-    clear(): this;
-
-    /**
-     * Set the maximum number of listeners allowed per event.
-     */
-    setMaxListeners(max: number): this;
-}
-
-/** Create a new event emitter instance */
-declare const useEventEmitter: (maxListeners?: number) => UseEventEmitter;
-
-export { UseEventEmitter, useEventEmitter };

package/types/hooks/use-favicon.d.ts

@@ -1,41 +0,0 @@
-export declare class UseFavIcon {
-    /**
-     * Create a favicon manager.
-     * @param FavIcon Initial favicon URL.
-     * @param withEmitter Whether to enable an internal event emitter (default: true).
-     */
-    constructor(FavIcon?: string, withEmitter?: boolean);
-
-    /**
-     * Sets the favicon URL.
-     * Emits "ziko:favicon-changed" if emitter is enabled.
-     */
-    setFavicon(href: string): this;
-
-    /**
-     * Returns the current favicon URL.
-     */
-    readonly current: string;
-
-    /**
-     * Listen for favicon changes.
-     * Callback receives the new href as a string.
-     */
-    onChange(callback: (href: string) => void): this;
-
-    /**
-     * To Do 
-     * Disable or remove the internal event emitter entirely.
-     */
-    removeEventEmitter(): this;
-
-    /**
-     * Enable the internal event emitter manually.
-     */
-    useEventEmitter(): this;
-}
-
-/**
- * Factory function to create a `UseFavIcon` instance.
- */
-export declare const useFavIcon: (FavIcon?: string, withEmitter?: boolean) => UseFavIcon;

package/types/hooks/use-ipc.d.ts

@@ -1,12 +0,0 @@
-export declare class UseIPC {
-    emit(event: string, data: any, rooms?: string[]): this;
-    on(event: string, handler: (data: any) => void, rooms?: string | string[]): this;
-    off(event: string, handler: (data: any) => void): this;
-    once(event: string, handler: (data: any) => void, rooms?: string | string[]): this;
-    join(...rooms: string[]): this;
-    leave(...rooms: string[]): this;
-    close(): this;
-
-}
-
-export declare const useIPC: (name?: string) => UseIPC;

package/types/hooks/use-media-query.d.ts

@@ -1,24 +0,0 @@
-export interface MediaQueryRule {
-    query: string;
-    callback: () => void;
-}
-
-export class UseMediaQuery {
-    // Private fields (only for type awareness; not accessible)
-    private readonly #mediaQueryRules: MediaQueryRule[];
-    private readonly #fallback: () => void;
-    private #lastCalledCallback: (() => void) | null;
-
-    constructor(
-        mediaQueryRules?: MediaQueryRule[],
-        fallback?: () => void
-    );
-}
-
-/**
- * Helper function to create a UseMediaQuery instance.
- */
-export function useMediaQuery(
-    mediaQueryRules?: MediaQueryRule[],
-    fallback?: () => void
-): UseMediaQuery;

package/types/hooks/use-reactive.d.ts

@@ -1,14 +0,0 @@
-import { mapfun, MapfunResult } from "../math/utils/mapfun.d.ts";
-import { useState } from "./use-state.d.ts";
-
-export function useReactive<
-    T
->(
-    nested_value: T
-): MapfunResult<
-    (n: any) => {
-        get: ReturnType<typeof useState<any>>[0];
-        set: ReturnType<typeof useState<any>>[1];
-    },
-    T
->;

package/types/hooks/use-root.d.ts

@@ -1,15 +0,0 @@
-export declare class UseRoot<PropMap extends Record<string, string>> {
-    constructor(PropsMap: PropMap, options?: UseRootOptions);
-
-    currentPropsMap: PropMap;
-    namespace: string;
-    ValidateCssProps: boolean;
-
-    /** Dynamically created CSS variable references */
-    [K in keyof PropMap]: string;
-
-    /**
-     * Apply a new set of properties
-     */
-    use(PropsMap: PropMap): this;
-}

package/types/hooks/use-state.d.ts

@@ -1,25 +0,0 @@
-export function useState<T>(
-    initialValue: T
-): [
-    /** getter function */
-    () => {
-        value: T;
-        isStateGetter: () => true;
-        _subscribe: (fn: (value: T) => void) => void;
-    },
-
-    /** setter function */
-    (newValue: T | ((prev: T) => T)) => void,
-
-    /** controller */
-    {
-        pause: () => void;
-        resume: () => void;
-        clear: () => void;
-        force: (newValue: T | ((prev: T) => T)) => void;
-        getSubscribers: () => Set<(value: T) => void>;
-    }
-];
-
-/** check if argument is a state getter */
-export function isStateGetter(arg: any): boolean;

package/types/hooks/use-storage.d.ts

@@ -1,47 +0,0 @@
-// use-storage.d.ts
-
-export declare class UseStorage {
-    constructor(
-        storage: Storage,
-        globalKey: string,
-        initialValue?: Record<string, any>,
-        use_channel?: boolean
-    );
-
-    /** Current stored items */
-    readonly items: Record<string, any>;
-
-    /** Set entire storage */
-    set(data: Record<string, any>): this;
-
-    /** Merge new data into existing storage */
-    add(data: Record<string, any>): this;
-
-    /** Remove keys from storage */
-    remove(...keys: string[]): this;
-
-    /** Get a single key */
-    get(key: string): any;
-
-    /** Clear storage completely */
-    clear(): this;
-
-    /**
-     * Listen for any storage updates.
-     * Callback receives the data passed to the last .set() / .add() / .remove()
-     */
-    onStorageUpdated(callback: (data: Record<string, any>) => void): this;
-}
-
-/** Factory functions */
-export declare const useLocaleStorage: (
-    key: string,
-    initialValue?: Record<string, any>,
-    use_channel?: boolean
-) => UseStorage;
-
-export declare const useSessionStorage: (
-    key: string,
-    initialValue?: Record<string, any>,
-    use_channel?: boolean
-) => UseStorage;

package/types/hooks/use-title.d.ts

@@ -1,37 +0,0 @@
-export declare class UseTitle {
-    /**
-     * Create a reactive title manager.
-     * @param title Initial title. Defaults to `document.title`.
-     * @param withEmitter Whether to create an internal event emitter. Default: true.
-     */
-    constructor(title?: string, withEmitter?: boolean);
-
-    /**
-     * Enables the internal event emitter.
-     */
-    useEventEmitter(): this;
-
-    /**
-     * Sets the document title.
-     * Emits "ziko:title-changed" if emitter is enabled.
-     */
-    setTitle(title: string): this;
-
-    /**
-     * Returns the current document title.
-     */
-    readonly current: string;
-
-    /**
-     * Listen for title changes.
-     */
-    onChange(callback: (title: string) => void): this;
-
-    /**
-     * To Do 
-     * Disable or remove the internal event emitter entirely.
-     */
-    removeEventEmitter(): this;
-}
-
-export declare const useTitle: (title?: string, withEmitter?: boolean) => UseTitle;