ziko 1.6.1 → 1.7.0

package/dist/ziko.cjs

@@ -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
@@ -13,11 +13,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]));
@@ -2229,12 +2229,39 @@ function __init__global__(){
     }
 }
 
+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){
@@ -2282,9 +2309,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;
@@ -2392,8 +2436,9 @@ var LifecycleMethods = /*#__PURE__*/Object.freeze({
 
 // if (!globalThis.__Ziko__) __init__global__();
 
+const STATE_GETTER = Symbol.for("ziko.stateGetter");
+
 function useState(initialValue) {
-    
     const state = {
         value: initialValue,
         subscribers: new Set(),
@@ -2403,7 +2448,6 @@ function useState(initialValue) {
     function getValue() {
         return {
             value: state.value,
-            isStateGetter: () => true,
             _subscribe: (fn) => {
                 state.subscribers.add(fn);
                 return () => state.subscribers.delete(fn);
@@ -2411,6 +2455,8 @@ function useState(initialValue) {
         };
     }
 
+    getValue[STATE_GETTER] = true;
+
     function setValue(newValue) {
         if (state.paused) return;
 
@@ -2432,6 +2478,7 @@ function useState(initialValue) {
             if (typeof newValue === "function") {
                 newValue = newValue(state.value);
             }
+
             state.value = newValue;
             state.subscribers.forEach((fn) => fn(state.value));
         },
@@ -2441,9 +2488,7 @@ function useState(initialValue) {
     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());
 
@@ -2594,8 +2639,8 @@ 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),
@@ -3085,7 +3130,7 @@ function register_swipe_event(
 }
 
 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 : {
@@ -3105,7 +3150,7 @@ let UIElement$1 = 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(
@@ -3198,15 +3243,22 @@ let UIElement$1 = class UIElement extends UIElementCore{
 
 };
 
+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'];
@@ -3259,9 +3311,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) {
@@ -3433,40 +3485,18 @@ const tags = new Proxy({}, {
     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)
+    }
   }
 });
 
@@ -3750,7 +3780,9 @@ class UISwap extends UIElement$1 {
         };
         
         this.append(...items);
-        this.render();
+        requestAnimationFrame(() => {
+            this.render();
+        });
     }
     get activeItem(){
         return this.items[this.states.activeIndex]
@@ -3758,7 +3790,7 @@ class UISwap extends UIElement$1 {
     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) {
@@ -3766,6 +3798,9 @@ class UISwap extends UIElement$1 {
             }
         });
     }
+    get DS(){
+        return this.#DISPLAYS_MAP
+    }
     next(n = 1) {
         return this.activate(this.states.activeIndex + n);
     }
@@ -4393,13 +4428,15 @@ const csv2object = (csv, delimiter = ",") => {
 };
 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");
   };
@@ -4516,6 +4553,35 @@ function trimKeys(obj) {
     }, 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}){
@@ -5249,6 +5315,7 @@ exports.PI = PI$1;
 exports.PtrListeners = PtrListeners;
 exports.Random = Random;
 exports.SPA = SPA;
+exports.STATE_GETTER = STATE_GETTER;
 exports.SVGWrapper = SVGWrapper;
 exports.Scheduler = Scheduler;
 exports.Suspense = Suspense;
@@ -5353,8 +5420,8 @@ exports.in_quint = in_quint;
 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;
@@ -5399,6 +5466,8 @@ exports.out_quad = out_quad;
 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;