ziko 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "1.7.0",
+  "version": "1.9.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/{flex → components/Flex}/index.js

@@ -1,4 +1,4 @@
-import { UIElement } from "../constructors/UIElement.js";
+import { UIElement } from "../../constructors/UIElement.js";
 import { 
   set_vertical,
   set_horizontal,

package/src/dom/components/{for → For}/index.js

@@ -1,4 +1,4 @@
-import { Fragment, UIFragment } from "../fragment/index.js";
+import { Fragment, UIFragment } from "../Fragment/index.js";
 
 class UIFor extends UIFragment{
     constructor({each, fallback, mapFn = () => {}} = {}){

package/src/dom/{suspense → components/Suspense}/index.js

@@ -1,5 +1,5 @@
-import {UIElement} from "../mini/UIElement.js";
-class ZikoUISuspense extends UIElement{
+import {UIElement} from "../../mini/UIElement.js";
+export class UISuspense extends UIElement{
     constructor(fallback_ui, callback){
         super({element : "div", name : "suspense"})
         this.setAttr({
@@ -20,8 +20,4 @@ class ZikoUISuspense extends UIElement{
     }
 }
 
-const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
-export{
-    ZikoUISuspense,
-    Suspense
-}
+export const Suspense = (fallback_ui, callback) => new UISuspense(fallback_ui, callback);

package/src/dom/components/View/index.js

@@ -0,0 +1,9 @@
+import { UIElement } from "../../constructors/UIElement.js";
+export class UIView extends UIElement{
+    constructor(...items){
+        super({element : 'div', name : 'view'})
+        this.append(...items)
+    }
+}
+
+export const View = (...items) => new UIView(...items);

package/src/dom/{graphics/canvas.js → components/graphics/Canvas/index.js}

@@ -1,6 +1,6 @@
-import {UIElement} from "../constructors/UIElement.js";
-import {Matrix} from "../../math/matrix/Matrix.js"
-class ZikoUICanvas extends UIElement{
+import {UIElement} from "../../../constructors/UIElement.js";
+import {Matrix} from "../../../../math/matrix/index.js"
+class UICanvas extends UIElement{
     constructor(w,h){
         super("canvas","canvas");
         this.ctx = this.element?.getContext("2d");
@@ -121,7 +121,7 @@ class ZikoUICanvas extends UIElement{
     }
     clone(){
         console.log(this.width)
-        const canvas=new ZikoUICanvas();
+        const canvas=new UICanvas();
         canvas.items=this.items;
         canvas.transformMatrix=this.transformMatrix;
         canvas.axisMatrix=this.axisMatrix;
@@ -168,8 +168,8 @@ class ZikoUICanvas extends UIElement{
     }
 }
 
-const Canvas=(w,h)=>new ZikoUICanvas(w,h);
+const Canvas=(w,h)=>new UICanvas(w,h);
 export{
-    ZikoUICanvas,
+    UICanvas,
     Canvas
 }

package/src/dom/{graphics/svg.js → components/graphics/Svg/index.js}

@@ -1,5 +1,5 @@
-import {UIElement}  from "../constructors/UIElement.js";
-class ZikoUISvg extends UIElement {
+import {UIElement}  from "../../../constructors/UIElement.js";
+class UISvg extends UIElement {
     constructor(w=360,h=300) {
       super("svg","svg");
       //this.cache={};
@@ -62,8 +62,8 @@ class ZikoUISvg extends UIElement {
     
   }
 
-  const Svg =(w,h)=>new ZikoUISvg(w,h);
+  const Svg =(w,h)=>new UISvg(w,h);
   export{
     Svg,
-    ZikoUISvg,
+    UISvg,
 }

package/src/dom/components/graphics/index.js

@@ -0,0 +1,2 @@
+export * from './Canvas/index.js'
+export * from './Svg/index.js';

package/src/dom/components/index.js

@@ -1,3 +1,10 @@
-export * from './swap/index.js'
-export * from './fragment/index.js'
-export * from './for/index.js'
+export * from './View/index.js';
+export * from './Flex/index.js';
+export * from './Suspense/index.js';
+export * from './Swap/index.js';
+export * from './Fragment/index.js';
+export * from './For/index.js';
+export * from './Switch/index.js';
+
+export * from './wrappers/index.js'
+export * from './graphics/index.js'

package/src/dom/{wrappers/html → components/wrappers/HTMLWrapper}/index.js

@@ -1,4 +1,4 @@
-import { UIElement } from "../../constructors/UIElement.js";
+import { UIElement } from "../../../constructors/UIElement.js";
 
 class UIHTMLWrapper extends UIElement {
     constructor(content){

package/src/dom/{wrappers/svg → components/wrappers/SVGWrapper}/index.js

@@ -1,4 +1,4 @@
-import { UIElement } from "../../constructors/UIElement.js";
+import { UIElement } from "../../../constructors/UIElement.js";
 
 class UISVGWrapper extends UIElement {
     constructor(content){

package/src/dom/components/wrappers/index.js

@@ -0,0 +1,2 @@
+export * from './HTMLWrapper/index.js'
+export * from './SVGWrapper/index.js'

package/src/dom/constructors/mixins/dom.js

@@ -81,6 +81,7 @@ export async function __addItem__(adder, pusher, ...ele) {
         // Fix Items Latter
     if (ele[i] instanceof Function) {
       if (isStateGetter(ele[i])) {
+        console.log({s : ele[i]()})
         const getter = ele[i]();
         ele[i] = text(getter.value);
         getter._subscribe(

package/src/dom/index.js

@@ -1,15 +1,7 @@
 export * from './constructors/UIElement.js'
 export * from './constructors/UINode.js'
 export * from './utils/index.js'
-export * from './view/index.js'
 export * from './tags/index.js';
 export * from './text/index.js';
-export * from './flex/index.js';
-// export * from './grid/index.js';
-export * from './suspense/index.js';
-export * from './wrappers/index.js';
-// export * from './graphics/index.js'
 export * from './web-component/index.js'
-export * from './logic/index.js'
-
 export * from './components/index.js'

package/src/hooks/index.d.ts

@@ -2,6 +2,7 @@ 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-effect.d.ts'
 export type * from './use-reactive.d.ts'
 export type * from './use-thread.d.ts'
 export type * from './use-event-emitter.d.ts'

package/src/hooks/index.js

@@ -2,6 +2,7 @@
 export * from './use-state.js';
 export * from './use-derived.js';
 export * from './use-reactive.js';
+export * from './use-effect.js'
 
 //
 export * from './use-ipc.js'

package/src/hooks/use-derived.js

@@ -1,23 +1,30 @@
+import { STATE_GETTER } from '../symbols/index.js';
+
 export function useDerived(deriveFn, sources) {
     let value = deriveFn(...sources.map(s => s().value));
     const subscribers = new Set();
-    let paused = false;
 
-    sources.forEach(source => {
-        const srcValue = source();
-        srcValue._subscribe(() => {
-            if (!paused) {
-                const newVal = deriveFn(...sources.map(s => s().value));
-                if (newVal !== value) {
-                    value = newVal;
-                    subscribers.forEach(fn => fn(value));
-                }
-            }
-        }); 
-    });
-    return () => ({
+    // const unsubscribers = sources.map(source => {
+    //     const srcValue = source();
+
+    //     return srcValue._subscribe(() => {
+    //         const newVal = deriveFn(...sources.map(s => s().value));
+
+    //         if (!Object.is(newVal, value)) {
+    //             value = newVal;
+    //             subscribers.forEach(fn => fn(value));
+    //         }
+    //     });
+    // });
+
+    const getter = () => ({
         value,
-        isStateGetter : () => true,
-        _subscribe: (fn) => subscribers.add(fn)
-    })
+        _subscribe: (fn) => {
+            subscribers.add(fn);
+            return () => subscribers.delete(fn);
+        },
+    });
+
+    getter[STATE_GETTER] = true;
+    return getter
 }

package/src/hooks/use-effect.d.ts

@@ -0,0 +1,39 @@
+import type { StateGetter } from "./use-state.d.ts";
+
+
+/**
+ * Executes a side effect initially and whenever one of the
+ * provided reactive state dependencies changes.
+ *
+ * The current values of the state dependencies are passed
+ * to the callback in the same order as the dependency array.
+ *
+ * @param callback Effect callback receiving the current dependency values.
+ * @param deps Reactive state getters to watch.
+ * @returns A function that unsubscribes the effect and runs its cleanup.
+ *
+ * @example
+ * const [count, setCount] = useState(0);
+ *
+ * useEffect(
+ *     count => {
+ *         console.log("Count:", count);
+ *     },
+ *     [count]
+ * );
+ *
+ * // Count: 0
+ *
+ * setCount(1);
+ * // Count: 1
+ *
+ * setCount(2);
+ * // Count: 2
+ *
+ * setCount(3);
+ * // Count: 3
+ */
+export declare function useEffect<T extends readonly unknown[]>(
+    callback: (...values: T) => void | (() => void),
+    deps: { [K in keyof T]: StateGetter<T[K]> }
+): () => void;

package/src/hooks/use-effect.js

@@ -0,0 +1,40 @@
+import { isStateGetter } from "./use-state.js";
+
+export const useEffect = (callback, deps = []) =>{
+    const states = deps.filter(isStateGetter);
+
+    let cleanup;
+
+    const execute = () => {
+        // Cleanup previous effect
+        if (typeof cleanup === "function") {
+            cleanup();
+        }
+
+        // Read current state values
+        const values = states.map(state => state().value);
+
+        // Execute effect
+        cleanup = callback(...values);
+    };
+
+    // Subscribe to states
+    const unsubscribers = states.map(state =>
+        state()._subscribe(execute)
+    );
+
+    // Initial execution
+    execute();
+
+    // Return effect cleanup
+    return () => {
+        unsubscribers.forEach(unsubscribe => {
+            unsubscribe();
+        });
+
+        if (typeof cleanup === "function") {
+            cleanup();
+            cleanup = undefined;
+        }
+    };
+}

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

@@ -1,17 +1,33 @@
+export declare const STATE_GETTER: unique symbol;
+
+/**
+ * Reactive state getter.
+ */
+export type StateGetter<T> = (() => {
+    value: T;
+    _subscribe: (fn: (value: T) => void) => () => void;
+}) & {
+    [STATE_GETTER]: true;
+};
+
+/**
+ * Creates a reactive state.
+ *
+ * @param initialValue Initial state value.
+ *
+ * @example
+ * const [count, setCount] = useState(0);
+ */
 export function useState<T>(
     initialValue: T
 ): [
-    /** getter function */
-    () => {
-        value: T;
-        isStateGetter: () => true;
-        _subscribe: (fn: (value: T) => void) => void;
-    },
+    /** Getter function */
+    StateGetter<T>,
 
-    /** setter function */
+    /** Setter function */
     (newValue: T | ((prev: T) => T)) => void,
 
-    /** controller */
+    /** Controller */
     {
         pause: () => void;
         resume: () => void;
@@ -21,5 +37,7 @@ export function useState<T>(
     }
 ];
 
-/** check if argument is a state getter */
-export function isStateGetter(arg: any): boolean;
+/**
+ * Checks if a value is a state getter.
+ */
+export function isStateGetter(arg: unknown): arg is StateGetter<unknown>;

package/src/hooks/use-state.js

@@ -2,7 +2,9 @@
 
 // if (!globalThis.__Ziko__) __init__global__();
 
-export const STATE_GETTER = Symbol.for("ziko.stateGetter");
+// export const STATE_GETTER = Symbol.for("ziko.stateGetter");
+
+import {STATE_GETTER} from '../symbols/index.js'
 
 export function useState(initialValue) {
     const state = {

package/src/symbols/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Runtime brand identifying a ZikoJS `mapfun` function.
+ *
+ * Used for runtime type detection without importing the `mapfun`
+ * implementation, helping prevent circular dependencies.
+ */
+export declare const MAPFUN: unique symbol;
+
+/**
+ * Runtime brand identifying a ZikoJS `Complex` instance.
+ *
+ * Used for nominal runtime type detection without importing the
+ * `Complex` class directly.
+ */
+export declare const COMPLEX: unique symbol;
+
+/**
+ * Runtime brand identifying a ZikoJS `Matrix` instance.
+ *
+ * Used for nominal runtime type detection without importing the
+ * `Matrix` class directly.
+ */
+export declare const MATRIX: unique symbol;
+
+/**
+ * Runtime brand identifying a ZikoJS `UIElement` instance.
+ *
+ * Used to detect UI elements without creating a dependency on the
+ * `UIElement` implementation.
+ */
+export declare const UIELEMENT: unique symbol;
+
+/**
+ * Runtime brand identifying a ZikoJS state getter.
+ *
+ * Used by hooks and UI components to recognize state getters without
+ * importing the state implementation.
+ */
+export declare const STATE_GETTER: unique symbol;

package/src/symbols/index.js

@@ -0,0 +1,5 @@
+export const MAPFUN       = Symbol.for('ziko/math/MAPFUN');
+export const COMPLEX      = Symbol.for('ziko/math/COMPLEX');
+export const MATRIX       = Symbol.for('ziko/math/MATRIX');
+export const UIELEMENT    = Symbol.for('ziko/dom/UIELEMENT');
+export const STATE_GETTER = Symbol.for("ziko/hooks/STATE_GETTER");

package/src/dom/graphics/index.js

@@ -1,2 +0,0 @@
-export * from './canvas.js'
-export * from './svg.js';

package/src/dom/logic/index.js

@@ -1 +0,0 @@
-export * from './switch/index.js'

package/src/dom/view/index.js

@@ -1,13 +0,0 @@
-import { UIElement } from "../constructors/UIElement.js";
-class UIView extends UIElement{
-    constructor(...items){
-        super({element : 'div', name : 'view'})
-        this.append(...items)
-    }
-}
-
-const View = (...items) => new UIView(...items);
-export{
-    View,
-    UIView
-} 

package/src/dom/wrappers/index.js

@@ -1,2 +0,0 @@
-export * from './html/index.js'
-export * from './svg/index.js'

package/src/events-dep/binders/coordinates-based-event.js

@@ -1,25 +0,0 @@
-import { ZikoEvent } from "../ziko-event.js";
-
-export class CoordinatesBasedEvent extends ZikoEvent{
-    constructor(signature, target = null, Events = [], details_setter, customizer){
-        super(signature, target, Events, details_setter, customizer)
-        Object.assign(this.cache,{
-            useNormalisedCoordinates : false
-        })
-        this.isDown = false;
-        this.isMoving = false;
-        this.dx = 0;
-        this.dy = 0;
-        this.mx = 0;
-        this.my = 0;
-        this.ux = 0;
-        this.uy = 0;
-    }
-    get isDragging(){
-        return this.isDown && this.isMoving
-    }
-    useNormalisedCoordinates(enable = true){
-        this.cache.useNormalisedCoordinates = enable;
-        return this;
-    }
-}

package/src/events-dep/binders/custom-event.js

@@ -1,33 +0,0 @@
-import { ZikoEvent } from "../ziko-event.js";
-class ZikoCustomEvent extends ZikoEvent{
-    constructor(target, events, customizer){
-        super('custom', target, events, details_setter, customizer)
-    }
-    _register_events(events){
-        super._register_events(events, null, null, false);
-        return this;
-    }
-    emit(event_name, detail = {}){
-        const event = new CustomEvent(event_name, {
-            detail,
-            bubbles: true,
-            cancelable: true
-        });
-        this.targetElement.dispatchEvent(event);
-        return this;
-    }
-    on(event_name, ...callbacks){
-        if(!this.cache.options.hasOwnProperty(event_name)) this._register_events([event_name]);
-        this.__onEvent(event_name, this.cache.options[event_name], {}, ...callbacks);
-        return this;
-    }
-}
-function details_setter(){
-
-}
-const bind_custom_event = (target, events, customizer) => new ZikoCustomEvent(target, events, customizer)
-
-export{
-    bind_custom_event,
-    ZikoCustomEvent
-}

package/src/events-dep/binders/index.js

@@ -1,105 +0,0 @@
-import { ZikoEvent } from "../ziko-event.js";
-import { EventsMap } from "../events-map/index.js";
-import {
-    ptr_details_setter,
-    key_details_setter,
-    mouse_details_setter,
-    touch_details_setter
-} from '../details-setter/index.js'
-import {
-    CoordinatesBasedEvent
-} from './coordinates-based-event.js'
-import { 
-    register_click_away_event,
-    register_view_event,
-    register_swipe_event
-} from "../custom-events-registry/index.js";
-
-export const bind_click_event = (target, customizer) => {
-    register_click_away_event(target.element)
-    return new ZikoEvent(
-        'click',
-        target,
-        EventsMap.Click,
-        null,
-        customizer
-    );
-}
-export const bind_clipboard_event = (target, customizer) => new ZikoEvent(
-    'clipboard',
-    target,
-    EventsMap.Clipboard,
-    null,
-    customizer
-);
-export const bind_drag_event = (target, customizer) => new ZikoEvent(
-    'drag',
-    target,
-    EventsMap.Drag,
-    null,
-    customizer
-);
-export const bind_focus_event = (target, customizer) => new ZikoEvent(
-    'focus',
-    target,
-    EventsMap.Focus,
-    null,
-    customizer
-);
-export const bind_key_event = (target, customizer) => new ZikoEvent(
-    'key',
-    target,
-    EventsMap.Key, 
-    key_details_setter, 
-    customizer
-);
-export const bind_mouse_event = (target, customizer) => new CoordinatesBasedEvent(
-    'mouse',
-    target,
-    EventsMap.Mouse,
-    mouse_details_setter,
-    customizer
-);
-export const bind_pointer_event = (target, customizer) => new CoordinatesBasedEvent(
-    'ptr',
-    target,
-    EventsMap.Ptr, 
-    ptr_details_setter, 
-    customizer
-);
-export const bind_touch_event = (target, customizer) => new CoordinatesBasedEvent(
-    'touch',
-    target,
-    EventsMap.Touch,
-    touch_details_setter,
-    customizer
-);
-export const bind_wheel_event = (target, customizer) => new ZikoEvent(
-    'wheel',
-    target,
-    EventsMap.Wheel,
-    null,
-    customizer
-);
-
-export const bind_view_event = (target, customizer) => {
-    register_view_event(target.element)
-    return new ZikoEvent(
-        'view',
-        target, 
-        EventsMap.View,
-        null, 
-        customizer
-    )
-}
-
-export const bind_swipe_event = (target, customizer) => {
-    register_swipe_event(target.element)
-    return new ZikoEvent(
-        'swipe',
-        target, 
-        EventsMap.Swipe,
-        null, 
-        customizer
-    )
-}

package/src/events-dep/custom-events-registry/click-away.js

@@ -1,38 +0,0 @@
-class ClickAwayEvent extends Event {
-  constructor(originalEvent, targetElement) {
-    super("clickaway", { bubbles: true, cancelable: true });
-    this.originalEvent = originalEvent;
-    this.targetElement = targetElement;
-  }
-}
-
-function register_click_away_event(element) {
-  function handler(e) {
-    if (!element.contains(e.target)) {
-      const clickAwayEvent = new ClickAwayEvent(e, element);
-      element.dispatchEvent(clickAwayEvent);
-    }
-  }
-
-  globalThis?.document?.addEventListener("click", handler);
-
-  return () => globalThis?.document?.removeEventListener("click", handler);
-  
-}
-
-export{
-    ClickAwayEvent,
-    register_click_away_event
-}
-
-// // Example usage
-// const box = document.querySelector("#my-box");
-
-// const stop = listenClickAway(box);
-
-// box.addEventListener("clickaway", (e) => {
-//   console.log("Clicked outside box!", e);
-// });
-
-// // later, you can stop listening:
-// // stop();

package/src/events-dep/custom-events-registry/index.js

@@ -1,3 +0,0 @@
-export * from './click-away.js'
-export * from './view.js'
-export * from './swipe.js'