ziko 0.49.1 → 0.49.3

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Nov 22 2025 13:34:29 GMT+0100 (UTC+01:00)
+  Date : Tue Nov 25 2025 19:11:53 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1179,17 +1179,143 @@ const __CACHE__ = {
     }
 };
 
+class ZikoUseChannel{
+    constructor(name = ""){
+        this.channel = new BroadcastChannel(name);
+        this.EVENTS_DATAS_PAIRS = new Map();
+        this.EVENTS_HANDLERS_PAIRS = new Map();
+        this.LAST_RECEIVED_EVENT = "";
+        this.UUID="ziko-channel"+Random.string(10);
+        this.SUBSCRIBERS = new Set([this.UUID]);
+    }
+    get broadcast(){
+        // update receiver
+        return this;
+    }
+    emit(event, data){
+        this.EVENTS_DATAS_PAIRS.set(event,data);
+        this.#maintainEmit(event);
+        return this;
+    }
+    on(event,handler=console.log){
+        this.EVENTS_HANDLERS_PAIRS.set(event,handler);
+        this.#maintainOn();
+        return this;
+    }
+    #maintainOn(){
+        this.channel.onmessage = (e) => {
+            this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
+            const USER_ID=e.data.userId;
+            this.SUBSCRIBERS.add(USER_ID);
+            const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
+            const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
+            if(Data && Handler)Handler(Data);
+          };
+          return this;
+    }
+    #maintainEmit(event){
+        this.channel.postMessage({
+            EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
+            last_sended_event:event,
+            userId:this.UUID
+        });
+        return this;
+    }
+    close(){
+        this.channel.close();
+        return this;
+    }
+}
+const useChannel = name => new ZikoUseChannel(name);
+
+// To do : remove old items
+class ZikoUseStorage{
+    constructor(storage, globalKey, initialValue){
+        this.cache={
+            storage,
+            globalKey,
+            channel:useChannel(`Ziko:useStorage-${globalKey}`),
+            oldItemKeys:new Set()
+        };
+        this.#init(initialValue);
+        this.#maintain();
+    }
+    get items(){
+        return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
+    }
+    #maintain() {
+        for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
+    }
+    #init(initialValue){
+        this.cache.channel=useChannel(`Ziko:useStorage-${this.cache.globalKey}`);
+        this.cache.channel.on("Ziko-Storage-Updated",()=>this.#maintain());
+        if(!initialValue)return;
+        if(this.cache.storage[this.cache.globalKey]){
+            Object.keys(this.items).forEach(key=>this.cache.oldItemKeys.add(key));
+            // console.group("Ziko:useStorage")
+            // console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
+            // console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
+            // console.group("")
+        }
+        else this.set(initialValue);
+    }
+    set(data){
+        this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(data));
+        this.cache.channel.emit("Ziko-Storage-Updated",{});
+        Object.keys(data).forEach(key=>this.cache.oldItemKeys.add(key));
+        this.#maintain();
+        return this
+    }
+    add(data){
+        const db={
+            ...this.items,
+            ...data
+        };
+        this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(db));
+        this.#maintain();
+        return this;
+    }
+    remove(...keys){
+        const db={...this.items};
+        for(let i=0;i<keys.length;i++){
+            delete db[keys[i]];
+            delete this[keys[i]];
+        }
+        this.set(db);
+        return this;
+    }
+    get(key){
+        return this.items[key];
+    }
+    clear(){
+        this.cache.storage.removeItem(this.cache.globalKey);
+        this.#maintain();
+        return this;
+    }
+
+}
+const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
+const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
+
 const __State__ = {
     store : new Map(),
-    index : import.meta.hot?.data?.__Ziko__?.__State__?.index ?? 0,
+    index : 0,
+    session_storage : null,
     register: function(state){
-        console.log({
-            // hmr : import.meta.hot?.data.__Ziko__.__State__.index,
-            index : this.index
-        });
+        if(!import.meta.env.SSR && import.meta.env.DEV){
+            if(!this.session) this.session_storage = useSessionStorage('ziko-state', {});
+            const savedValue = this.session_storage.get(this.index);
+            if(!savedValue) this.session_storage.add({[this.index] : state.value});
+            else state.value = savedValue;
+        }
         this.store.set(this.index++, state);
-    }
-    
+    },
+    update: function(index, value){
+       if(!import.meta.env.SSR && import.meta.env.DEV){
+            this.session_storage.add({[index] : value});
+        } 
+    },
+
 };
 
 function __init__global__(){
@@ -1447,20 +1573,8 @@ function _register_to_class_(target, mixin) {
 
 if(!globalThis.__Ziko__) __init__global__();
 
-    // HMR persistence
-if (import.meta.hot?.data) {
-    import.meta.hot.data.__Ziko__ = import.meta.hot.data?.__Ziko__ || globalThis?.__Ziko__;
-    globalThis.__Ziko__ = import.meta.hot.data.__Ziko__;
-    // import.meta.hot.accept(n=>console.log(n));
-    // console.log(import.meta.hot.data.__Ziko__.__State__.store)
-}
-
-
-
 function useState(initialValue) {
-
-    // console.log(import.meta.hot.data.__Ziko__.__State__.store.get(0))
-
+    
     const {store, index} = __Ziko__.__State__;
     __Ziko__.__State__.register({
             value : initialValue,
@@ -1468,7 +1582,7 @@ function useState(initialValue) {
             paused : false
     });
 
-    const current = store.get(index);
+    let current = store.get(index);
 
     function getValue() {
         return {
@@ -1480,10 +1594,13 @@ function useState(initialValue) {
 
     function setValue(newValue) {
         if (current.paused) return;
-        if (typeof newValue === "function") newValue = newValue(current.value);
+        if (typeof newValue === "function") {
+            newValue = newValue(current.value);
+        }
         if (newValue !== current.value) {
             current.value = newValue;
             current.subscribers.forEach(fn => fn(current.value));
+            __Ziko__.__State__.update(index, newValue);
         }
     }
 
@@ -2888,7 +3005,7 @@ const SVGWrapper = (content) => new UISVGWrapper(content);
 function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
     if (globalThis.customElements?.get(name)) {
         console.warn(`Custom element "${name}" is already defined`);
-        return; // skip redefinition
+        return;
     }
     if(name.search('-') === -1){
         console.warn(`"${name}" is not a valid custom element name`);
@@ -2912,19 +3029,21 @@ function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
             }
 
             connectedCallback() {
-                this.mount();
+                this.render();
             }
 
-            mount() {
+            render() {
                 this.shadowRoot.innerHTML = '';
-                this.UIElement = UIElement(this.props).mount(this.shadowRoot);
+                const item = UIElement(this.props);
+                if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot)); 
+                else item.mount(this.shadowRoot);
             }
 
             attributeChangedCallback(name, _, newValue) {
                 Object.assign(this.props, {
                     [name]: this.mask[name].type(newValue)
                 });
-                this.mount();
+                this.render();
             }
         }
     );
@@ -4463,6 +4582,7 @@ const throttle=(fn,delay)=>{
     }
 };
 
+const sleep= ms => new Promise(res => setTimeout(res, ms));
 function timeout(ms, fn) {
   let id;
   const promise = new Promise((resolve) => {
@@ -4479,10 +4599,6 @@ function timeout(ms, fn) {
   };
 }
 
-const sleep= ms => new Promise(res => setTimeout(res, ms));
-
-// use it with await
-
 class TimeLoop {
   constructor(callback, { step = 1000, t0 = 0, t1 = Infinity, autoplay = true } = {}) {
     this.callback = callback;
@@ -5092,55 +5208,6 @@ const useReactive = (nested_value) => mapfun$1(
     nested_value
 );
 
-class ZikoUseChannel{
-    constructor(name = ""){
-        this.channel = new BroadcastChannel(name);
-        this.EVENTS_DATAS_PAIRS = new Map();
-        this.EVENTS_HANDLERS_PAIRS = new Map();
-        this.LAST_RECEIVED_EVENT = "";
-        this.UUID="ziko-channel"+Random.string(10);
-        this.SUBSCRIBERS = new Set([this.UUID]);
-    }
-    get broadcast(){
-        // update receiver
-        return this;
-    }
-    emit(event, data){
-        this.EVENTS_DATAS_PAIRS.set(event,data);
-        this.#maintainEmit(event);
-        return this;
-    }
-    on(event,handler=console.log){
-        this.EVENTS_HANDLERS_PAIRS.set(event,handler);
-        this.#maintainOn();
-        return this;
-    }
-    #maintainOn(){
-        this.channel.onmessage = (e) => {
-            this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
-            const USER_ID=e.data.userId;
-            this.SUBSCRIBERS.add(USER_ID);
-            const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
-            const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
-            if(Data && Handler)Handler(Data);
-          };
-          return this;
-    }
-    #maintainEmit(event){
-        this.channel.postMessage({
-            EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
-            last_sended_event:event,
-            userId:this.UUID
-        });
-        return this;
-    }
-    close(){
-        this.channel.close();
-        return this;
-    }
-}
-const useChannel = name => new ZikoUseChannel(name);
-
 class ZikoUseThreed {
     #workerContent;
     constructor() {
@@ -5257,75 +5324,6 @@ tags.p("Test useRoot ").style({
 
 */
 
-// To do : remove old items
-class ZikoUseStorage{
-    constructor(storage, globalKey, initialValue){
-        this.cache={
-            storage,
-            globalKey,
-            channel:useChannel(`Ziko:useStorage-${globalKey}`),
-            oldItemKeys:new Set()
-        };
-        this.#init(initialValue);
-        this.#maintain();
-    }
-    get items(){
-        return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
-    }
-    #maintain() {
-        for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
-    }
-    #init(initialValue){
-        this.cache.channel=useChannel(`Ziko:useStorage-${this.cache.globalKey}`);
-        this.cache.channel.on("Ziko-Storage-Updated",()=>this.#maintain());
-        if(!initialValue)return;
-        if(this.cache.storage[this.cache.globalKey]){
-            Object.keys(this.items).forEach(key=>this.cache.oldItemKeys.add(key));
-            console.group("Ziko:useStorage");
-            console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
-            console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
-            console.group("");
-        }
-        else this.set(initialValue);
-    }
-    set(data){
-        this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(data));
-        this.cache.channel.emit("Ziko-Storage-Updated",{});
-        Object.keys(data).forEach(key=>this.cache.oldItemKeys.add(key));
-        this.#maintain();
-        return this
-    }
-    add(data){
-        const db={
-            ...this.items,
-            ...data
-        };
-        this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(db));
-        this.#maintain();
-        return this;
-    }
-    remove(...keys){
-        const db={...this.items};
-        for(let i=0;i<keys.length;i++){
-            delete db[keys[i]];
-            delete this[keys[i]];
-        }
-        this.set(db);
-        return this;
-    }
-    get(key){
-        return this.items[key];
-    }
-    clear(){
-        this.cache.storage.removeItem(this.cache.globalKey);
-        this.#maintain();
-        return this;
-    }
-
-}
-const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
-const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
-
 let {sqrt, cos, sin, exp, log, cosh, sinh} = Math;
 // Math.abs = new Proxy(Math.abs, {
 //   apply(target, thisArg, args) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.49.1",
+  "version": "0.49.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/__ziko__/__state__.js

@@ -1,12 +1,21 @@
+import { useSessionStorage } from '../use/use-storage'
 export const __State__ = {
     store : new Map(),
-    index : import.meta.hot?.data?.__Ziko__?.__State__?.index ?? 0,
+    index : 0,
+    session_storage : null,
     register: function(state){
-        console.log({
-            // hmr : import.meta.hot?.data.__Ziko__.__State__.index,
-            index : this.index
-        })
+        if(!import.meta.env.SSR && import.meta.env.DEV){
+            if(!this.session) this.session_storage = useSessionStorage('ziko-state', {})
+            const savedValue = this.session_storage.get(this.index)
+            if(!savedValue) this.session_storage.add({[this.index] : state.value});
+            else state.value = savedValue
+        }
         this.store.set(this.index++, state)
-    }
-    
+    },
+    update: function(index, value){
+       if(!import.meta.env.SSR && import.meta.env.DEV){
+            this.session_storage.add({[index] : value})
+        } 
+    },
+
 }

package/src/hooks/use-state.js

@@ -1,20 +1,9 @@
 import { __init__global__ } from "../__ziko__/index.js";
-if(!globalThis.__Ziko__) __init__global__()
-
-    // HMR persistence
-if (import.meta.hot?.data) {
-    import.meta.hot.data.__Ziko__ = import.meta.hot.data?.__Ziko__ || globalThis?.__Ziko__;
-    globalThis.__Ziko__ = import.meta.hot.data.__Ziko__;
-    // import.meta.hot.accept(n=>console.log(n));
-    // console.log(import.meta.hot.data.__Ziko__.__State__.store)
-}
-
 
+if(!globalThis.__Ziko__) __init__global__()
 
 export function useState(initialValue) {
-
-    // console.log(import.meta.hot.data.__Ziko__.__State__.store.get(0))
-
+    
     const {store, index} = __Ziko__.__State__
     __Ziko__.__State__.register({
             value : initialValue,
@@ -22,7 +11,7 @@ export function useState(initialValue) {
             paused : false
     })
 
-    const current = store.get(index);
+    let current = store.get(index);
 
     function getValue() {
         return {
@@ -34,10 +23,13 @@ export function useState(initialValue) {
 
     function setValue(newValue) {
         if (current.paused) return;
-        if (typeof newValue === "function") newValue = newValue(current.value);
+        if (typeof newValue === "function") {
+            newValue = newValue(current.value);
+        }
         if (newValue !== current.value) {
             current.value = newValue;
             current.subscribers.forEach(fn => fn(current.value));
+            __Ziko__.__State__.update(index, newValue)
         }
     }
 

package/src/time/delay/index.js

@@ -1,2 +1,16 @@
-export * from './timeout.js';
-export * from './sleep.js';
+export const sleep= ms => new Promise(res => setTimeout(res, ms));
+export function timeout(ms, fn) {
+  let id;
+  const promise = new Promise((resolve) => {
+    id = setTimeout(() => {
+      if (fn) fn();
+      resolve();
+    }, ms);
+  });
+
+  return {
+    id,
+    clear: () => clearTimeout(id),
+    promise
+  };
+}

package/src/use/use-storage.js

@@ -23,10 +23,10 @@ class ZikoUseStorage{
         if(!initialValue)return;
         if(this.cache.storage[this.cache.globalKey]){
             Object.keys(this.items).forEach(key=>this.cache.oldItemKeys.add(key));
-            console.group("Ziko:useStorage")
-            console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
-            console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
-            console.group("")
+            // console.group("Ziko:useStorage")
+            // console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
+            // console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
+            // console.group("")
         }
         else this.set(initialValue);
     }

package/types/time/clocks/clock.d.ts

@@ -0,0 +1,28 @@
+import { Tick } from "./tick.js";
+
+export interface ClockTickEvent {
+    elapsed: number;
+    delta: number;
+}
+
+export declare class Clock extends Tick {
+    elapsed: number;
+    protected _lastTime: number;
+    protected _callbacks: Set<(ev: ClockTickEvent) => void>;
+
+    constructor(tickMs?: number);
+
+    protected _tick(): void;
+
+    onTick(
+        cb: (ev: ClockTickEvent) => void
+    ): () => boolean;
+
+    reset(): void;
+
+    pause(): void;
+
+    resume(): void;
+}
+
+export declare function clock(tickMs?: number): Clock;

package/types/time/clocks/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './tick.d.ts'
+export type * from './clock.d.ts'
+export type * from './scheduler.d.ts'

package/types/time/clocks/scheduler.d.ts

@@ -0,0 +1,42 @@
+export interface TimeTask {
+    fn: () => Promise<any> | any;
+    delay?: number;
+}
+
+export type ParallelTasks = TimeTask[];
+
+export interface TimeSchedulerOptions {
+    repeat?: number;
+    loop?: boolean;
+}
+
+export declare class TimeScheduler {
+    tasks: (TimeTask | ParallelTasks)[];
+    repeat: number;
+    loop: boolean;
+
+    stopped: boolean;
+    running: boolean;
+
+    onStart: (() => void) | null;
+    onTask: ((fn: () => Promise<any> | any) => void) | null;
+    onEnd: (() => void) | null;
+
+    constructor(
+        tasks?: (TimeTask | ParallelTasks)[],
+        options?: TimeSchedulerOptions
+    );
+
+    run(): Promise<void>;
+
+    stop(): void;
+
+    addTask(task: TimeTask | ParallelTasks): void;
+
+    clearTasks(): void;
+}
+
+export declare function Scheduler(
+    tasks?: (TimeTask | ParallelTasks)[],
+    options?: { repeat?: number | null }
+): TimeScheduler;

package/types/time/clocks/tick.d.ts

@@ -0,0 +1,26 @@
+export declare class Tick {
+    ms: number;
+    fn: (self: Tick) => void;
+    count: number;
+    frame: number;
+    id: ReturnType<typeof setInterval> | null;
+    running: boolean;
+
+    constructor(
+        fn: (self: Tick) => void,
+        ms: number,
+        count?: number,
+        start?: boolean
+    );
+
+    start(): this;
+    stop(): this;
+    isRunning(): boolean;
+}
+
+export declare function tick(
+    fn: (self: Tick) => void,
+    ms: number,
+    count?: number,
+    start?: boolean
+): Tick;

package/types/time/decorators/index.d.ts

@@ -0,0 +1,9 @@
+export declare function debounce<T extends (...args: any[]) => any>(
+    fn: T,
+    delay?: number
+): (...args: Parameters<T>) => void;
+
+export declare function throttle<T extends (...args: any[]) => any>(
+    fn: T,
+    delay: number
+): (...args: Parameters<T>) => void;

package/types/time/delay/index.d.ts

@@ -0,0 +1,12 @@
+export declare const sleep: (ms: number) => Promise<void>;
+
+export interface TimeoutResult {
+    id: ReturnType<typeof setTimeout>;
+    clear: () => void;
+    promise: Promise<void>;
+}
+
+export declare function timeout(
+    ms: number,
+    fn?: () => any
+): TimeoutResult;

package/types/time/index.d.ts

@@ -1 +1,4 @@
-export type * from './ease/index.d.ts'
+export type * from './ease/index.d.ts'
+export type * from './clocks/index.d.ts'
+export type * from './decorators/index.d.ts'
+export type * from './loop/index.d.ts'

package/types/time/loop/index.d.ts

@@ -0,0 +1,50 @@
+export declare class TimeLoop {
+    callback: (self: TimeLoop) => void;
+
+    protected cache: {
+        isRunning: boolean;
+        id: ReturnType<typeof setTimeout> | null;
+        last_tick: number | null;
+        step: number;
+        t0: number;
+        t1: number;
+        autoplay: boolean;
+        pauseTime: number | null;
+        frame: number;
+        elapsed?: number;
+    };
+
+    constructor(
+        callback: (self: TimeLoop) => void,
+        options?: {
+            step?: number;
+            t0?: number;
+            t1?: number;
+            autoplay?: boolean;
+        }
+    );
+
+    get frame(): number;
+
+    get elapsed(): number | undefined;
+
+    start(): this;
+    pause(): this;
+    resume(): this;
+    stop(): this;
+
+    startAfter(t?: number): this;
+    stopAfter(t?: number): this;
+
+    protected animate: () => void;
+}
+
+export declare function loop(
+    callback: (self: TimeLoop) => void,
+    options?: {
+        step?: number;
+        t0?: number;
+        t1?: number;
+        autoplay?: boolean;
+    }
+): TimeLoop;