ziko 0.49.6 → 0.50.1

package/src/hooks/use-media-query.js

@@ -0,0 +1,59 @@
+/*
+ [
+    {
+        query: '(min-width: 600px)',
+        callback: () => console.log(1)
+    },
+    {
+        query: '(max-width: 300px)',
+        callback: () => console.log(2)
+    }
+ ]
+*/
+
+class UseMediaQuery {
+    #mediaQueryRules;
+    #fallback;
+    #lastCalledCallback = null;
+
+    constructor(mediaQueryRules = [], fallback = () => {}) {
+        this.#mediaQueryRules = mediaQueryRules;
+        this.#fallback = fallback;
+
+        this.#init();
+    }
+
+    // PRIVATE: check if ANY rule matches
+    #checkAllRules() {
+        return this.#mediaQueryRules.some(
+            ({ query }) => globalThis.matchMedia(query).matches
+        );
+    }
+
+    // PRIVATE: installs listeners and initial checks
+    #init() {
+        this.#mediaQueryRules.forEach(({ query, callback }) => {
+            const mediaQueryList = globalThis.matchMedia(query);
+
+            const checkMatches = () => {
+                const anyMatch = this.#checkAllRules();
+
+                if (mediaQueryList.matches) {
+                    callback();
+                    this.#lastCalledCallback = callback;
+                } else if (!anyMatch && this.#lastCalledCallback !== this.#fallback) {
+                    this.#fallback();
+                    this.#lastCalledCallback = this.#fallback;
+                }
+            };
+
+            checkMatches();
+            mediaQueryList.addEventListener("change", checkMatches);
+        });
+    }
+}
+
+const useMediaQuery = (mediaQueryRules, fallback) =>
+    new UseMediaQuery(mediaQueryRules, fallback);
+
+export { useMediaQuery };

package/src/hooks/use-root.js

@@ -0,0 +1,73 @@
+class UseRoot {
+    constructor(PropsMap, { namespace = 'Ziko', ValidateCssProps = false } = {}) {
+        this.currentPropsMap = PropsMap;
+        this.namespace = namespace;
+        this.ValidateCssProps = ValidateCssProps;
+        this.use(PropsMap);
+    }
+
+    use(PropsMap) {
+        if (this.ValidateCssProps) ValidateCssPropsFn(PropsMap);
+        this.currentPropsMap = PropsMap;
+        this.#maintain();
+        return this;
+    }
+
+    #maintain() {
+        const root = globalThis?.document?.documentElement?.style;
+        for (const prop in this.currentPropsMap) {
+            const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`;
+            root.setProperty(cssProp, this.currentPropsMap[prop]);
+
+            Object.defineProperty(this, prop, {
+                value: `var(${cssProp})`,
+                writable: true,
+                configurable: true,
+                enumerable: false
+            });
+        }
+    }
+}
+
+function ValidateCssPropsFn(PropsMap) {
+    const validProps = new Set(Object.keys(document.documentElement.style));
+    for (const key in PropsMap) {
+        if (!validProps.has(key)) {
+            throw new Error(`Invalid CSS property: "${key}"`);
+        }
+    }
+}
+
+const useRoot = (PropsMap, options = {}) => new UseRoot(PropsMap, options);
+
+export { 
+    UseRoot, 
+    useRoot
+};
+
+
+// Usage 
+
+/*
+const Styles = {
+ S1 : {
+  background : 'white',
+  color : 'darkblue'
+  border : '2px darkblue solid"'
+ },
+ S2 : {
+  background : 'darkblue',
+  color : 'white'
+  border : '2px green solid"'
+ }
+}
+const {use, border, background, color} = useRoot(Style.S1)
+
+tags.p("Test useRoot ").style({
+  border,
+  color,
+  background,
+  padding : '10px'
+})
+
+*/

package/src/hooks/use-storage.js

@@ -1,73 +1,99 @@
-// To do : remove old items
-import { useChannel } from "./use-channel.js";
-class UseStorage{
-    constructor(storage, globalKey, initialValue){
-        this.cache={
+import { useIPC } from "./use-ipc.js";
+
+class UseStorage {
+    constructor(storage, globalKey, initialValue, use_channel = true) {
+        this.cache = {
             storage,
             globalKey,
-            channel:useChannel(`Ziko:useStorage-${globalKey}`),
-            oldItemKeys:new Set()
-        }
-        this.#init(initialValue);
-        this.#maintain();
+            channel: use_channel ? useIPC(`Ziko:useStorage-${globalKey}`) : null,
+            oldItemKeys: new Set()
+        };
+
+        this.#init(initialValue, use_channel);
     }
-    get items(){
-        return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
+
+    get items() {
+        const raw = this.cache.storage.getItem(this.cache.globalKey);
+        if (!raw) return {};
+        try {
+            return JSON.parse(raw);
+        } catch {
+            return {};
+        }
     }
+
     #maintain() {
-        for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
+        const items = this.items;
+        this.cache.oldItemKeys.forEach(k => delete this[k]);
+        for (const key in items) {
+            this[key] = items[key];
+            this.cache.oldItemKeys.add(key);
+        }
     }
-    #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("")
+    #init(initialValue, use_channel) {
+        if (use_channel && this.cache.channel) this.cache.channel.on("Ziko-Storage-Updated", () => this.#maintain());
+        if (!initialValue) {
+            this.#maintain();
+            return;
         }
+        if (this.cache.storage.getItem(this.cache.globalKey)) {
+            const existing = this.items;
+            Object.keys(existing).forEach(k => this.cache.oldItemKeys.add(k));
+            this.#maintain();
+        } 
         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));
+
+    set(data) {
+        this.cache.storage.setItem(this.cache.globalKey, JSON.stringify(data));
+        if (this.cache.channel) this.cache.channel.emit("Ziko-Storage-Updated", data);
         this.#maintain();
-        return this
+        return this;
     }
-    add(data){
-        const db={
+
+    add(data) {
+        this.set({
             ...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);
+    remove(...keys) {
+        const items = { ...this.items };
+        keys.forEach(key => {
+            delete items[key];
+            delete this[key];
+            this.cache.oldItemKeys.delete(key);
+        });
+        this.set(items);
         return this;
     }
-    get(key){
+    get(key) {
         return this.items[key];
     }
-    clear(){
+    clear() {
         this.cache.storage.removeItem(this.cache.globalKey);
+        this.cache.oldItemKeys.forEach(k => delete this[k]);
+        this.cache.oldItemKeys.clear();
         this.#maintain();
         return this;
     }
-
+    onStorageUpdated(callback) {
+        if (this.cache.channel) {
+            this.cache.channel.on("Ziko-Storage-Updated", callback);
+        }
+        return this;
+    }
 }
-const useLocaleStorage=(key,initialValue)=>new UseStorage(localStorage,key,initialValue);
-const useSessionStorage=(key,initialValue)=>new UseStorage(sessionStorage,key,initialValue);
-export{
+
+// factory functions
+const useLocaleStorage = (key, initialValue, use_channel = true) =>
+    new UseStorage(localStorage, key, initialValue, use_channel);
+
+const useSessionStorage = (key, initialValue, use_channel = true) =>
+    new UseStorage(sessionStorage, key, initialValue, use_channel);
+
+export {
     useLocaleStorage,
     useSessionStorage
-}
+};

package/src/hooks/use-thread.js

@@ -0,0 +1,55 @@
+class UseThread {
+    #worker;
+    #callbacks = new Map();
+    #idCounter = 0;
+
+    constructor() {
+        const workerCode = `
+            this.onmessage = function(e) {
+                const { id, funStr, args, close } = e.data;
+                try {
+                    const func = new Function("return " + funStr)();
+                    const result = func(...args);
+                    postMessage({ id, result });
+                } catch (error) {
+                    postMessage({ id, error: error.message });
+                } finally {
+                    if (close) self.close();
+                }
+            }
+        `;
+        const blob = new Blob([workerCode], { type: "text/javascript" });
+        this.#worker = new Worker(URL.createObjectURL(blob));
+
+        this.#worker.addEventListener("message", (e) => {
+            const { id, result, error } = e.data;
+            const callback = this.#callbacks.get(id);
+            if (!callback) return;
+
+            callback(result, error);
+            this.#callbacks.delete(id);
+        });
+    }
+    call(func, callback, args = [], close = true) {
+        if (typeof func !== "function") throw new TypeError("func must be a function");
+        const id = ++this.#idCounter;
+        this.#callbacks.set(id, callback);
+
+        this.#worker.postMessage({
+            id,
+            funStr: func.toString(),
+            args,
+            close
+        });
+
+        return this;
+    }
+
+    terminate() {
+        this.#worker.terminate();
+    }
+}
+
+const useThread = (func, callback, args = [], close = true) => new UseThread().call(func, callback, args, close);
+
+export { UseThread, useThread };

package/src/hooks/use-title.js

@@ -0,0 +1,43 @@
+import { useEventEmitter } from "./use-event-emitter.js";
+
+class UseTitle {
+    constructor(title = document.title, withEmitter = true) {
+        this.cache = {
+            emitter: null
+        };
+
+        if (withEmitter) this.useEventEmitter();
+        this.set(title);
+    }
+
+    useEventEmitter() {
+        this.cache.emitter = useEventEmitter();
+        return this;
+    }
+
+    setTitle(title) {
+        if (title !== document.title) {
+            document.title = title;
+
+            if (this.cache.emitter) {
+                this.cache.emitter.emit("ziko:title-changed", title);
+            }
+        }
+        return this;
+    }
+
+    get current() {
+        return document.title;
+    }
+
+    onChange(callback) {
+        if (this.cache.emitter) {
+            this.cache.emitter.on("ziko:title-changed", callback);
+        }
+        return this;
+    }
+}
+
+const useTitle = (title, withEmitter = true) => new UseTitle(title, withEmitter);
+
+export { useTitle };

package/src/index.js

@@ -5,7 +5,7 @@ export * from "./data/index.js";
 // export * from "./reactivity/index.js"
 export * from "./app/index.js";
 export * from './hooks/index.js';
-export * from './use/index.js'
+// export * from './use/index.js'
 
 export * from "./events/index.js";
 

package/src/ui/__methods__/events.js

@@ -1,4 +1,4 @@
-import { Events } from "../../events/__Events__.js";
+import { EventsMap } from "../../events/events-map/index.js";
 import {
   bind_pointer_event,
   bind_mouse_event,
@@ -10,6 +10,8 @@ import {
   bind_wheel_event
 } from "../../events/binders/index.js";
 
+import { bind_custom_event } from "../../events/binders/custom-event.js";
+
 const binderMap = {
   ptr: bind_pointer_event,
   mouse : bind_mouse_event,
@@ -21,14 +23,26 @@ const binderMap = {
   wheel : bind_wheel_event
 };
 
-const EventsMethodes = {};
+const EventsMethodes = {
+  on(event_name,...callbacks){
+    if(!this.events.custom)this.events.custom = bind_custom_event(this);
+    this.events.custom.on(event_name,...callbacks);
+    return this;
+  },
+  emit(event_name,detail={}){
+    if(!this.events.custom)this.events.custom = bind_custom_event(this);
+    this.events.custom.emit(event_name,detail);
+    return this;
+  }
+};
 
-Object.entries(Events).forEach(([name, eventList]) => {
+Object.entries(EventsMap).forEach(([name, eventList]) => {
+  const lname = name.toLowerCase()
   eventList.forEach(event => {
     const methodName = `on${event}`;
     EventsMethodes[methodName] = function (...callbacks) {
-      if (!this.events[name]) this.events[name] = binderMap[name.toLowerCase()](this);
-      this.events[name][methodName](...callbacks);
+      if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
+      this.events[lname][methodName](...callbacks);
       return this;
     };
   });

package/src/ui/constructors/UIElement.js

@@ -8,13 +8,13 @@ import {
   StyleMethods
 } from "../__methods__/index.js";
 import { 
-  useCustomEvent,
+  // useCustomEvent,
   // useSwipeEvent,
   // watchIntersection, 
   // watchSize,
   // watchAttr,
   // watchChildren
-} from "../../reactivity/events/custom-event.js"
+} from "../../--reactivity-deprecated/events/custom-event.js"
 class UIElement extends UIElementCore{
   constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
     super()
@@ -28,6 +28,8 @@ class UIElement extends UIElementCore{
       IndexingMethods, 
       EventsMethodes
     );
+
+    // console.log(EventsMethodes)
     if(element)this.init(element, name, type, render)
   }
   get element(){
@@ -165,16 +167,16 @@ class UIElement extends UIElementCore{
   //   this.events.clipboard.onSelect(...callbacks);
   //   return this;
   // }
-  on(event_name,...callbacks){
-    if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    this.events.custom.on(event_name,...callbacks);
-    return this;
-  }
-  emit(event_name,detail={}){
-    if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    this.events.custom.emit(event_name,detail);
-    return this;
-  }
+  // on(event_name,...callbacks){
+  //   if(!this.events.custom)this.events.custom = useCustomEvent(this);
+  //   this.events.custom.on(event_name,...callbacks);
+  //   return this;
+  // }
+  // emit(event_name,detail={}){
+  //   if(!this.events.custom)this.events.custom = useCustomEvent(this);
+  //   this.events.custom.emit(event_name,detail);
+  //   return this;
+  // }
   // watchAttr(callback){
   //   if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
   //   return this;

package/src/ui/constructors/UIElementCore.js

@@ -1,6 +1,7 @@
 import {UINode} from "./UINode.js";
-import {__init__global__, UIStore} from '../../__ziko__/index.js';
-__init__global__()
+// import {__init__global__} from '../../__ziko__/index.js';
+import { UIStore } from "../../__ziko__/__ui__.js";
+// __init__global__()
 class UIElementCore extends UINode{
   constructor(){
     super()
@@ -87,139 +88,5 @@ class UIElementCore extends UINode{
   isUIElement(){
     return true;
   }
-//   get st(){
-//     return this.cache.style;
-//   }
-//   get attr(){
-//     return this.cache.attributes;
-//   }
-//   get evt(){
-//     return this.events;
-//   }
-//   get html(){
-//     return this.element.innerHTML;
-//   }
-//   get text(){
-//     return this.element.textContent;
-//   }
-//   get isBody(){
-//     return this.element === globalThis?.document.body;
-//   }
-//   get parent(){
-//     return this.cache.parent;
-//   }
-//   get width(){
-//     return this.element.getBoundingClientRect().width;
-//   }
-//   get height(){
-//     return this.element.getBoundingClientRect().height;
-//   }
-//   get top(){
-//     return this.element.getBoundingClientRect().top;
-//   }
-//   get right(){
-//     return this.element.getBoundingClientRect().right;
-//   }
-//   get bottom(){
-//     return this.element.getBoundingClientRect().bottom;
-//   }
-//   get left(){
-//     return this.element.getBoundingClientRect().left;
-//   }
-//   clone(render=false) {
-//     // UI.__proto__=this.__proto__;
-//     // if(this.items.length){
-//     //   const items = [...this.items].map(n=>n.clone());
-//     //   UI.append(...items);
-//     // }
-//     // else UI.element=this.element.cloneNode(true);
-//     // return UI.mount(render);
-//   }
-
-//   freeze(freeze){
-//     this.cache.isFrozzen=freeze;
-//     return this;
-//   }
-  // setTarget(tg) {
-  //   if(this.isBody) return ;
-  //   if (tg?.isUIElement) tg = tg.element;
-  //   this.unmount();
-  //   this.target = tg;
-  //   this.mount();
-  //   return this;
-  // }
-//   describe(label){
-//     if(label)this.setAttr("aria-label",label)
-//   }
-//   get children() {
-//     return [...this.element.children];
-//   }
-//   get cloneElement() {
-//     return this.element.cloneNode(true);
-//   }
-//   setClasses(...value) {
-//     this.setAttr("class", value.join(" "));
-//     return this;
-//   }
-//   get classes(){
-//     const classes=this.element.getAttribute("class");
-//     return classes===null?[]:classes.split(" ");
-//   }
-//   addClass() {
-//     /*this.setAttr("class", value);
-//         return this;*/
-//   }
-//   setId(id) {
-//     this.setAttr("id", id);
-//     return this;
-//   }
-//   get id() {
-//     return this.element.getAttribute("id");
-//   }
-//   onSwipe(width_threshold, height_threshold,...callbacks){
-//     if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
-//     this.events.swipe.onSwipe(...callbacks);
-//     return this;
-//   }
-  // To Fix
-  // onKeysDown({keys=[],callback}={}){
-  //   if(!this.events.key)this.events.key = useKeyEvent(this);
-  //   this.events.key.handleSuccessifKeys({keys,callback});
-  //   return this;
-  // }
-  // onSelect(...callbacks){
-  //   if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-  //   this.events.clipboard.onSelect(...callbacks);
-  //   return this;
-  // }
-//   on(event_name,...callbacks){
-//     if(!this.events.custom)this.events.custom = useCustomEvent(this);
-//     this.events.custom.on(event_name,...callbacks);
-//     return this;
-//   }
-//   emit(event_name,detail={}){
-//     if(!this.events.custom)this.events.custom = useCustomEvent(this);
-//     this.events.custom.emit(event_name,detail);
-//     return this;
-//   }
-//   watchAttr(callback){
-//     if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
-//     return this;
-//   }
-//   watchChildren(callback){
-//     if(!this.observer.children)this.observer.children = watchChildren(this,callback);
-//     return this;
-//   }
-//   watchSize(callback){
-//     if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
-//     this.observer.resize.start();
-//     return this;
-//   }
-//   watchIntersection(callback,config){
-//     if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
-//     this.observer.intersection.start();
-//     return this;
-//   }
-
 }
 export { UIElementCore }

package/types/hooks/index.d.ts

@@ -1,4 +1,11 @@
-export type * from './use-channel.d.ts'
+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-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

@@ -0,0 +1,33 @@
+// 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;