ziko 1.6.0 → 1.7.0

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

@@ -12,7 +12,9 @@ export class UISwap extends UIElement {
         };
         
         this.append(...items);
-        this.render();
+        requestAnimationFrame(() => {
+            this.render();
+        });
     }
     get activeItem(){
         return this.items[this.states.activeIndex]
@@ -20,7 +22,7 @@ export class UISwap extends UIElement {
     render() {
         this.items.forEach((n, i) => {
 
-            const initialDisplay = n.element?.style?.display || '';
+            const initialDisplay = getComputedStyle(n.element).display;
             this.#DISPLAYS_MAP.set(n, initialDisplay);
 
             if (i !== this.states.activeIndex) {
@@ -28,6 +30,9 @@ export class UISwap extends UIElement {
             }
         });
     }
+    get DS(){
+        return this.#DISPLAYS_MAP
+    }
     next(n = 1) {
         return this.activate(this.states.activeIndex + n);
     }

package/src/dom/constructors/UIElement.js

@@ -16,7 +16,7 @@ import {
   ViewListeners,
 } from '../../events/index.js'
 class UIElement extends UIElementCore{
-  constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
+  constructor({element, name ='', type = 'html', render = __Ziko__.__Config__.default.render, props}={}){
     super()
     this.exp = {
       events : {
@@ -36,7 +36,7 @@ class UIElement extends UIElementCore{
       ViewListeners,
     );
 
-    if(element)this.init(element, name, type, render);
+    if(element) this.init({element, name, type, render, props});
   }
   on(event_name, callback, {details_setter, category = 'global', isCustom = false, preventDefault = false} = {}){
     if(event_name instanceof Array) event_name.forEach(

package/src/dom/constructors/UIElementCore.js

@@ -1,12 +1,13 @@
 import {UINode} from "./UINode.js";
 import {__init__global__} from '../../__ziko__/index.js';
 import { UIStore } from "../../__ziko__/__ui__.js";
+import { parse_props } from "../utils/parse_props.js";
 __init__global__()
 class UIElementCore extends UINode{
   constructor(){
     super()
   }
-  init(element, name, type, render){
+  init({element, name, type, render, props = {}, items = []} = {}){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
       switch(type){
@@ -54,9 +55,26 @@ class UIElementCore extends UINode{
     }
     if(element) Object.assign(this.cache,{element});
     this.items = new UIStore();
-    globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
+    globalThis.__Ziko__.__UI__[this.cache.name]
+      ? globalThis.__Ziko__.__UI__[this.cache.name]?.push(this)
+      : globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && render && this?.render?.()
     globalThis.__Ziko__.__UI__.push(this)
+
+    // console.log({props})
+    const parsed_props = parse_props(props);
+
+    this.parsed_props = parsed_props;
+
+    this.style(parsed_props.style);
+    this.setAttr(parsed_props.attrs);
+
+    const Events = Object.entries(parsed_props.events);
+
+    Events.forEach(([ev, callback]) => this[ev](callback.bind(this)))
+    
+
+    if(items.length > 0) this.append(...items)
   }
   get element(){
     return this.cache.element;

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

@@ -1,4 +1,5 @@
 import { text } from "../../text/index.js";
+import { isStateGetter } from "../../../hooks/use-state.js";
 
 export function append(...ele) {
   __addItem__.call(this, "append", "push", ...ele);
@@ -79,8 +80,8 @@ export async function __addItem__(adder, pusher, ...ele) {
     if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
         // Fix Items Latter
     if (ele[i] instanceof Function) {
-     const getter = ele[i]();
-      if (getter.isStateGetter) {
+      if (isStateGetter(ele[i])) {
+        const getter = ele[i]();
         ele[i] = text(getter.value);
         getter._subscribe(
             (newValue) => (ele[i].element.textContent = newValue),

package/src/dom/tags/index.js

@@ -1,51 +1,28 @@
 import {UIElement} from "../constructors/UIElement.js";
 import { HTMLTags, SVGTags, MathMLTags } from "./tags-list.js";
+import { isStateGetter } from "../../hooks/use-state.js";
+import { call_with_optional_props } from "../utils/call_with_optional_props.js";
+import { is_ui_item } from "../utils/is_ui_item.js";
 
-const tags = new Proxy({}, {
+export const tags = new Proxy({}, {
   get(target, prop) {
     if (typeof prop !== 'string') return undefined;
     let tag = prop.replaceAll("_","-").toLowerCase();
     let type ;
-    if(HTMLTags.includes(tag)) type = 'html'
-    if(SVGTags.includes(tag)) type = 'svg'
-    if(MathMLTags.includes(tag)) type = 'mathml'
-    return (...args)=>{
-      // Fix undefined
-      // console.log(isStateGetter(args[0]))
-      // console.log(!!args)
+    if(HTMLTags.includes(tag)) type = 'html';
+    if(SVGTags.includes(tag)) type = 'svg';
+    if(MathMLTags.includes(tag)) type = 'mathml';
+    return (...args) => {
       if(args.length === 0) {
-        // console.log('length 0')
         return new UIElement({element : tag, name : tag, type})
       }
       if(
         ['string', 'number'].includes(typeof args[0]) 
         || args[0] instanceof UIElement 
-        || (typeof args[0] === 'function' && args[0]().isStateGetter())
+        || isStateGetter(args[0])
+        || args[0] instanceof HTMLElement
       ) return new UIElement({element : tag, name : tag, type}).append(...args);
-      // console.log(args[0])
-      return new UIElement({element : tag, type}).setAttr(args.shift()).append(...args)
+      return new UIElement({element : tag, type, props : args.shift()}).append(...args)
     }
-    // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);
-    // return (...args)=>{
-    //   if(!(args[0] instanceof UIElement) && args[0] instanceof Object){
-    //     let attributes = args.shift()
-    //     return new UIElement(tag).setAttr(attributes).append(...args)
-    //   }
-    //   return new UIElement(tag).append(...args);
-    // }
-    // // switch(tag){
-    //   case "html"  : globalThis?.document?.createElement("html")
-    //   case "head"  :
-    //   case "style" :
-    //   case "link"  :
-    //   case "meta"  :
-    //   case "srcipt":
-    //   case "body"  : return null; break;
-    //   default : return new UIElement(tag);
-    // }
   }
-});
-
-export {
-  tags
-}
+});

package/src/dom/utils/call_with_optional_props.js

@@ -0,0 +1,14 @@
+import { is_primitive } from "./checkers.js";
+export const call_with_optional_props = (Component) => {
+    return (...args) => {
+        const first = args[0];
+
+        const isChild = first?.isUIElement?.() || is_primitive(first);
+
+        if (isChild) {
+            return new Component({}, ...args);
+        }
+
+        return new Component(first, ...args.slice(1));
+    };
+};

package/src/dom/utils/checkers.js

@@ -0,0 +1 @@
+export const is_primitive = (value) => typeof value !== 'object' && typeof value !== 'function' || value === null;

package/src/dom/utils/index.js

@@ -1,12 +1,7 @@
-export const call_with_optional_props = (Component) => {
-    return (...args) => {
-        const first = args[0];
-        const isChild = first?.isUIElement?.() || isPrimitive(first) ;
-        return isChild 
-                ? new Component({}, ...args)
-                : new Component(first, ...args.slice(1))
-    };
-};
+export * from './call_with_optional_props.js';
+export * from './parse_props.js';
+export * from './checkers.js'
+
 export function add_vendor_prefix(property) {
 	const propertyUC = property.slice(0, 1).toUpperCase() + property.slice(1);
 	const vendors = ['Webkit', 'Moz', 'O', 'ms'];
@@ -59,9 +54,9 @@ const CloneElement = (UIElement) => {
 const cloneUI=UIElement=>{
   return Object.assign(Object.create(Object.getPrototypeOf(UIElement)),UIElement)
 }
-function isPrimitive(value) {
-    return typeof value !== 'object' && typeof value !== 'function' || value === null;
-}
+// function isPrimitive(value) {
+//     return typeof value !== 'object' && typeof value !== 'function' || value === null;
+// }
 const waitElm=(UIElement)=>{
     return new Promise(resolve => {
         if (UIElement) {
@@ -87,7 +82,7 @@ export{
   linkStyle,
   CloneElement,
   cloneUI,
-  isPrimitive,
+  // isPrimitive,
   // addSuffixeToNumber,
   waitElm
 }

package/src/dom/utils/is_ui_item.js

@@ -0,0 +1,10 @@
+import { isStateGetter } from '../../hooks/use-state.js'
+import { UIElement } from '../constructors/UIElement.js'
+export const is_ui_item = item => {
+    return (
+        ['string', 'number'].includes(item)
+        || isStateGetter(item)
+        || item instanceof HTMLElement
+        || item instanceof UIElement
+    )
+}

package/src/dom/utils/parse_props.js

@@ -0,0 +1,26 @@
+export const parse_props = (props = {}) => {
+
+    const result = {
+        methods: {},
+        events: {},
+        style: {},
+        attrs: {}
+    };
+
+    for (const [key, value] of Object.entries(props)) {
+        if (key === "style") {
+            result.style = value;
+        }
+        else if (key.startsWith("$")) {
+            result.methods[key.slice(1)] = value;
+        }
+        else if (/^on[A-Z]/.test(key)) {
+            result.events[key] = value;
+        }
+        else {
+            result.attrs[key] = value;
+        }
+    }
+
+    return result;
+}

package/src/hooks/use-state.js

@@ -2,8 +2,9 @@
 
 // if (!globalThis.__Ziko__) __init__global__();
 
+export const STATE_GETTER = Symbol.for("ziko.stateGetter");
+
 export function useState(initialValue) {
-    
     const state = {
         value: initialValue,
         subscribers: new Set(),
@@ -13,7 +14,6 @@ export function useState(initialValue) {
     function getValue() {
         return {
             value: state.value,
-            isStateGetter: () => true,
             _subscribe: (fn) => {
                 state.subscribers.add(fn);
                 return () => state.subscribers.delete(fn);
@@ -21,6 +21,8 @@ export function useState(initialValue) {
         };
     }
 
+    getValue[STATE_GETTER] = true;
+
     function setValue(newValue) {
         if (state.paused) return;
 
@@ -42,6 +44,7 @@ export function useState(initialValue) {
             if (typeof newValue === "function") {
                 newValue = newValue(state.value);
             }
+
             state.value = newValue;
             state.subscribers.forEach((fn) => fn(state.value));
         },
@@ -51,6 +54,4 @@ export function useState(initialValue) {
     return [getValue, setValue, controller];
 }
 
-export const isStateGetter = (arg) => {
-    return typeof arg === "function" && arg?.()?.isStateGetter?.() === true;
-};
+export const isStateGetter = (arg) => typeof arg === "function" && arg[STATE_GETTER] === true;

package/src/time/animation/index.d.ts

@@ -0,0 +1,189 @@
+/**
+ * Easing function used by animations.
+ *
+ * @param t - Normalized animation progress value between 0 and 1.
+ * @returns The transformed progress value.
+ */
+export type EasingFunction = (t: number) => number;
+
+/**
+ * Configuration options for a TimeAnimation instance.
+ */
+export interface TimeAnimationOptions {
+    /**
+     * Easing function applied to the normalized progress.
+     *
+     * @default linear
+     */
+    ease?: EasingFunction;
+
+    /**
+     * Interval step between animation updates in milliseconds.
+     *
+     * @default 50
+     */
+    step?: number;
+
+    /**
+     * Initial time offset.
+     *
+     * @default 0
+     */
+    t0?: number;
+
+    /**
+     * Automatically start the animation after creation.
+     *
+     * @default true
+     */
+    start?: boolean;
+
+    /**
+     * Animation duration in milliseconds.
+     *
+     * @default 3000
+     */
+    duration?: number;
+}
+
+/**
+ * Runtime state of a TimeAnimation instance.
+ */
+export interface TimeAnimationState {
+    /**
+     * Whether the animation is currently running.
+     */
+    isRunning: boolean;
+
+    /**
+     * Internal interval identifier.
+     */
+    animationId: ReturnType<typeof setInterval> | null;
+
+    /**
+     * Timestamp when the animation started.
+     */
+    startTime: number | null;
+
+    /**
+     * Current easing function.
+     */
+    ease: EasingFunction;
+
+    /**
+     * Interval step duration.
+     */
+    step: number;
+
+    /**
+     * Whether the animation starts automatically.
+     */
+    autoStart: boolean;
+
+    /**
+     * Total animation duration.
+     */
+    duration: number;
+}
+
+/**
+ * Callback executed on every animation tick.
+ *
+ * @param animation - Current animation instance.
+ */
+export type AnimationCallback = (animation: TimeAnimation) => void;
+
+/**
+ * Time-based animation controller.
+ *
+ * Provides start, pause, resume, stop and reset lifecycle methods.
+ * The callback receives the animation instance containing the current
+ * elapsed time and progress values.
+ */
+export declare class TimeAnimation {
+    /**
+     * Creates a new time animation.
+     *
+     * @param callback - Function called on each animation step.
+     * @param options - Animation configuration.
+     */
+    constructor(
+        callback: AnimationCallback,
+        options?: TimeAnimationOptions
+    );
+
+    /**
+     * Animation state.
+     */
+    state: TimeAnimationState;
+
+    /**
+     * Elapsed animation time in milliseconds.
+     */
+    t: number;
+
+    /**
+     * Normalized progress value between 0 and 1.
+     */
+    tx: number;
+
+    /**
+     * Eased progress value.
+     */
+    ty: number;
+
+    /**
+     * Current animation step index.
+     */
+    i: number;
+
+    /**
+     * Starts or restarts the animation.
+     *
+     * @returns The current animation instance.
+     */
+    start(): this;
+
+    /**
+     * Pauses the animation.
+     *
+     * @returns The current animation instance.
+     */
+    pause(): this;
+
+    /**
+     * Resumes a paused animation.
+     *
+     * @returns The current animation instance.
+     */
+    resume(): this;
+
+    /**
+     * Stops the animation and resets its progress.
+     *
+     * @returns The current animation instance.
+     */
+    stop(): this;
+
+    /**
+     * Resets animation progress.
+     *
+     * @param restart - Whether to restart automatically after reset.
+     *
+     * @returns The current animation instance.
+     */
+    reset(restart?: boolean): this;
+}
+
+/**
+ * Creates a time-based animation instance.
+ *
+ * @param callback - Function executed on every animation tick.
+ * @param options - Animation configuration.
+ *
+ * @returns A new TimeAnimation instance.
+ */
+export declare const animation: (
+    callback: AnimationCallback,
+    options?: TimeAnimationOptions
+) => TimeAnimation;

package/src/time/index.d.ts

@@ -1,4 +1,5 @@
 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'
+export type * from './loop/index.d.ts'
+export type * from './animation/index.d.ts'

package/src/data/parser/xml.js

@@ -1,47 +0,0 @@
-function parseXML(xmlString) {
-    const parser = new DOMParser();
-    const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
-    const rootNode = xmlDoc.documentElement;
-    const result = parseNode(rootNode);
-    return result;
-  }
-  
-  function parseNode(node) {
-    const obj = {
-      type: node.nodeName,
-      attributes: {},
-      children: []
-    };
-    for (let i = 0; i < node.attributes.length; i++) {
-      const attr = node.attributes[i];
-      obj.attributes[attr.name] = attr.value;
-    }
-    for (let i = 0; i < node.childNodes.length; i++) {
-      const child = node.childNodes[i];
-      if (child.nodeType === Node.ELEMENT_NODE) {
-        obj.children.push(parseNode(child));
-      } else if (child.nodeType === Node.TEXT_NODE) {
-        obj.text = child.textContent.trim();
-      }
-    }
-    return obj;
-  }
-  export default parseXML;
-
-  // function htmlParser(element) {
-  //   const obj = {
-  //     type: element.tagName,
-  //     attributes: {},
-  //     children: [],
-  //   };
-  //   for (let i = 0; i < element.attributes.length; i++) {
-  //     const attr = element.attributes[i];
-  //     obj.attributes[attr.name] = attr.value;
-  //   }
-  //   for (let i = 0; i < element.children.length; i++) {
-  //     const child = element.children[i];
-  //     obj.children.push(htmlParser(child));
-  //   }
-  //   return obj;
-  // }
-