ziko 1.7.0 → 1.8.0

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/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-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/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'

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

@@ -1,76 +0,0 @@
-class SwipeEvent extends CustomEvent {
-  constructor(type, detail) {
-    super(type, {
-      detail,
-      bubbles: true,
-      cancelable: true
-    });
-  }
-}
-
-function register_swipe_event(
-  element,
-  threshold = 50,
-  restraint = 100,
-  allowedTime = 500
-) {
-  let startX = 0,
-      startY = 0,
-      startTime = 0,
-      isPointerDown = false;
-
-  function onPointerDown(e) {
-    startX = e.clientX;
-    startY = e.clientY;
-    startTime = performance.now();
-    isPointerDown = true;
-  }
-
-  function onPointerUp(e) {
-    if (!isPointerDown) return;
-    isPointerDown = false;
-
-    const distX = e.clientX - startX;
-    const distY = e.clientY - startY;
-    const elapsed = performance.now() - startTime;
-
-    let direction = null;
-    let eventName = null;
-
-    if (elapsed <= allowedTime) {
-      if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
-        direction = distX < 0 ? "left" : "right";
-        eventName = "swipe" + direction;
-      } 
-      else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
-        direction = distY < 0 ? "up" : "down";
-        eventName = "swipe" + direction;
-      }
-    }
-
-    // Emit event
-    if (eventName) {
-      element.dispatchEvent(
-        new SwipeEvent(eventName, {
-          direction,
-          distX,
-          distY,
-          originalEvent: e
-        })
-      );
-    }
-  }
-
-  element.addEventListener("pointerdown", onPointerDown, { passive: true });
-  element.addEventListener("pointerup", onPointerUp, { passive: true });
-
-  return () => {
-    element.removeEventListener("pointerdown", onPointerDown);
-    element.removeEventListener("pointerup", onPointerUp);
-  };
-}
-
-export {
-  SwipeEvent,
-  register_swipe_event
-};

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

@@ -1,74 +0,0 @@
-import { throttle } from "../../time/decorators/index.js";
-class ViewEvent extends CustomEvent {
-    constructor(type, detail, { bubbles = true, cancelable = true } = {}) {
-        super(type, { detail, bubbles, cancelable });
-    }
-}
-
-function register_view_event(
-    element,
-    {
-        intersection = true,
-        resize = true,
-        threshold = 0,
-        throttleResize = 100,
-        throttleEnterExit = 0
-    } = {}
-) {
-    let intersectionObserver, resizeObserver;
-    const resizeCallback = entries => {
-        for (let entry of entries) {
-            const { width, height } = entry.contentRect;
-
-            element.dispatchEvent(
-                new ViewEvent("resizeview", {
-                    width,
-                    height,
-                    entry
-                })
-            );
-        }
-    };
-
-    const throttledResize = throttleResize > 0
-        ? throttle(resizeCallback, throttleResize)
-        : resizeCallback;
-
-    const intersectionCallback = entries => {
-        for (let entry of entries) {
-            const type = entry.isIntersecting ? "enterview" : "exitview";
-            element.dispatchEvent(new ViewEvent(type, entry));
-        }
-    };
-
-    const throttledIntersections = throttleEnterExit > 0
-        ? throttle(intersectionCallback, throttleEnterExit)
-        : intersectionCallback;
-
-    if (intersection) {
-        intersectionObserver = new IntersectionObserver(throttledIntersections, { threshold });
-        intersectionObserver.observe(element);
-    }
-
-    if (resize) {
-        resizeObserver = new ResizeObserver(throttledResize);
-        resizeObserver.observe(element);
-    }
-
-    // ---- UNREGISTER ----
-    return () => {
-        if (intersectionObserver) {
-            intersectionObserver.unobserve(element);
-            intersectionObserver.disconnect();
-        }
-        if (resizeObserver) {
-            resizeObserver.unobserve(element);
-            resizeObserver.disconnect();
-        }
-    };
-}
-
-export {
-    ViewEvent,
-    register_view_event
-};

package/src/events-dep/details-setter/index.js

@@ -1,4 +0,0 @@
-export * from './key.js'
-export * from './pointer.js'
-export * from './mouse.js'
-export * from './touch.js'

package/src/events-dep/details-setter/key.js

@@ -1,14 +0,0 @@
-export function key_details_setter(){
-    switch(this.currentEvent){
-        case "keydown" : {
-            this.kd = this.event.key
-        }; break;
-        case "keypress" : {
-            this.kp = this.event.key
-        }; break;
-        case "keyup" : {
-            this.ku = this.event.key
-        }; break;
-
-    }
-}