ziko 1.6.0 → 1.7.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Jul 31 2026 17:26:32 GMT+0100 (UTC+01:00)
+  Date : Fri Aug 07 2026 20:07:58 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
@@ -17,11 +17,11 @@
    const { PI: PI$1, E } = Math;
    const EPSILON=Number.EPSILON;
 
-   const is_primitive = value => typeof value !== 'object' && typeof value !== 'function' || value === null;
+   const is_primitive$1 = value => typeof value !== 'object' && typeof value !== 'function' || value === null;
 
    const mapfun$1=(fun,...X)=>{
        const Y=X.map(x=>{
-           if(is_primitive(x) || x?.__mapfun__) return fun(x)
+           if(is_primitive$1(x) || x?.__mapfun__) return fun(x)
            if(x instanceof Array) return x.map(n=>mapfun$1(fun,n));
            if(ArrayBuffer.isView(x)) return x.map(n=>fun(n));
            if(x instanceof Set) return new Set(mapfun$1(fun,...[...x]));
@@ -2233,12 +2233,39 @@
        }
    }
 
+   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;
+   };
+
    __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){
@@ -2286,9 +2313,26 @@
        };
        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;
@@ -2396,8 +2440,9 @@
 
    // if (!globalThis.__Ziko__) __init__global__();
 
+   const STATE_GETTER = Symbol.for("ziko.stateGetter");
+
    function useState(initialValue) {
-       
        const state = {
            value: initialValue,
            subscribers: new Set(),
@@ -2407,7 +2452,6 @@
        function getValue() {
            return {
                value: state.value,
-               isStateGetter: () => true,
                _subscribe: (fn) => {
                    state.subscribers.add(fn);
                    return () => state.subscribers.delete(fn);
@@ -2415,6 +2459,8 @@
            };
        }
 
+       getValue[STATE_GETTER] = true;
+
        function setValue(newValue) {
            if (state.paused) return;
 
@@ -2436,6 +2482,7 @@
                if (typeof newValue === "function") {
                    newValue = newValue(state.value);
                }
+
                state.value = newValue;
                state.subscribers.forEach((fn) => fn(state.value));
            },
@@ -2445,9 +2492,7 @@
        return [getValue, setValue, controller];
    }
 
-   const isStateGetter = (arg) => {
-       return typeof arg === "function" && arg?.()?.isStateGetter?.() === true;
-   };
+   const isStateGetter = (arg) => typeof arg === "function" && arg[STATE_GETTER] === true;
 
    const camel2hyphencase = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
 
@@ -2598,8 +2643,8 @@
        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),
@@ -3089,7 +3134,7 @@
    }
 
    let UIElement$1 = 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 : {
@@ -3109,7 +3154,7 @@
          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(
@@ -3202,15 +3247,22 @@
 
    };
 
+   const is_primitive = (value) => typeof value !== 'object' && typeof value !== 'function' || value === null;
+
    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))
+
+           const isChild = first?.isUIElement?.() || is_primitive(first);
+
+           if (isChild) {
+               return new Component({}, ...args);
+           }
+
+           return new Component(first, ...args.slice(1));
        };
-   };
+   };
+
    function add_vendor_prefix(property) {
    	const propertyUC = property.slice(0, 1).toUpperCase() + property.slice(1);
    	const vendors = ['Webkit', 'Moz', 'O', 'ms'];
@@ -3263,9 +3315,9 @@
    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) {
@@ -3437,40 +3489,18 @@
        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)
+       return (...args) => {
          if(args.length === 0) {
-           // console.log('length 0')
            return new UIElement$1({element : tag, name : tag, type})
          }
          if(
            ['string', 'number'].includes(typeof args[0]) 
            || args[0] instanceof UIElement$1 
-           || (typeof args[0] === 'function' && args[0]().isStateGetter())
+           || isStateGetter(args[0])
+           || args[0] instanceof HTMLElement
          ) return new UIElement$1({element : tag, name : tag, type}).append(...args);
-         // console.log(args[0])
-         return new UIElement$1({element : tag, type}).setAttr(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);
-       // }
+         return new UIElement$1({element : tag, type, props : args.shift()}).append(...args)
+       }
      }
    });
 
@@ -3754,7 +3784,9 @@
            };
            
            this.append(...items);
-           this.render();
+           requestAnimationFrame(() => {
+               this.render();
+           });
        }
        get activeItem(){
            return this.items[this.states.activeIndex]
@@ -3762,7 +3794,7 @@
        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) {
@@ -3770,6 +3802,9 @@
                }
            });
        }
+       get DS(){
+           return this.#DISPLAYS_MAP
+       }
        next(n = 1) {
            return this.activate(this.states.activeIndex + n);
        }
@@ -4397,13 +4432,15 @@
    };
    const csv2json = (csv, delimiter = ",") => JSON.stringify(csv2object(csv,delimiter));
    const csv2sql=(csv, Table)=>{
+       const sanitizeId = s => s.trim().replace(/[^a-zA-Z0-9_]/g, '');
+       const escapeVal = s => "'" + s.trim().replace(/'/g, "''") + "'";
        const lines = csv.trim().trimEnd().split('\n').filter(n=>n);
-       const columns = lines[0].split(',');
-       let sqlQuery = `INSERT INTO ${Table} (${columns.join(', ')}) Values `;
+       const columns = lines[0].split(',').map(sanitizeId);
+       let sqlQuery = "INSERT INTO " + sanitizeId(Table) + " (" + columns.join(', ') + ") Values ";
        let sqlValues = [];
        for (let i = 1; i < lines.length; i++) {
-         const values = lines[i].split(',');
-         sqlValues.push(`(${values})`);
+         const values = lines[i].split(',').map(escapeVal);
+         sqlValues.push("(" + values.join(', ') + ")");
        }
        return sqlQuery+sqlValues.join(",\n");
      };
@@ -4520,6 +4557,35 @@
        }, Array.isArray(obj) ? [] : {});
    }
 
+   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;
+     }
+
    // import { ZikoHead , useHead} from "../reactivity/hooks/head/index.js";
    class ZikoApp {
        constructor({head = null, wrapper = null, target = null}){
@@ -5253,6 +5319,7 @@
    exports.PtrListeners = PtrListeners;
    exports.Random = Random;
    exports.SPA = SPA;
+   exports.STATE_GETTER = STATE_GETTER;
    exports.SVGWrapper = SVGWrapper;
    exports.Scheduler = Scheduler;
    exports.Suspense = Suspense;
@@ -5357,8 +5424,8 @@
    exports.in_sin = in_sin;
    exports.interquartile_mean = interquartile_mean;
    exports.iqr = iqr;
-   exports.isPrimitive = isPrimitive;
    exports.isStateGetter = isStateGetter;
+   exports.is_primitive = is_primitive;
    exports.json2arr = json2arr;
    exports.json2css = json2css;
    exports.json2csv = json2csv;
@@ -5403,6 +5470,8 @@
    exports.out_quart = out_quart;
    exports.out_quint = out_quint;
    exports.out_sin = out_sin;
+   exports.parseXML = parseXML;
+   exports.parse_props = parse_props;
    exports.percentile = percentile;
    exports.pow = pow$1;
    exports.power_mean = power_mean;