ziko 0.45.1 → 0.45.3

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Aug 31 2025 15:09:47 GMT+0100 (UTC+01:00)
+  Date : Wed Sep 03 2025 15:22:46 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
@@ -1204,22 +1204,21 @@
 
     __init__global__();
     class UIElementCore extends UINode{
-      constructor({
-            element, 
-            name ='', 
-            type="html", 
-            render = __Ziko__.__Config__.default.render, 
-            isInteractive = false,
-        }={}){
+      constructor(){
         super();
-        this.init(element, name, type, render, isInteractive);
       }
       init(element, name, type, render, isInteractive = [true, false][Math.floor(2*Math.random())]){
         this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
         if(typeof element === "string") {
           switch(type){
-            case "html" : element = globalThis?.document?.createElement(element); break;
-            case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
+            case "html" : {
+              element = globalThis?.document?.createElement(element);
+              console.log('1');
+            } break;
+            case "svg" : {
+              element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
+              console.log('2');
+            } break;
             default : throw Error("Not supported")
           }
         }
@@ -1273,7 +1272,7 @@
           // && 
           this.isInteractive()){
           // this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-          this.element.setAttribute('ziko-hydration-index', globalThis.__Ziko__.__HYDRATION__.index);
+          // this.element.setAttribute('ziko-hydration-index', globalThis.__Ziko__.__HYDRATION__.index)
           globalThis.__Ziko__.__HYDRATION__.register(() => this);
         }
         globalThis.__Ziko__.__UI__.push(this);
@@ -1453,49 +1452,11 @@
       }
     }
 
-    function register_to_instance(target, ...mixins){
-        console.log('register to instance');
-        mixins.forEach(n => _register_to_instance_(target, n));
-    }
-    function _register_to_instance_(instance, mixin) {
-      const descriptors = Object.getOwnPropertyDescriptors(mixin);
-      for (const key of Reflect.ownKeys(descriptors)) {
-        const desc = descriptors[key];
-        if ('get' in desc || 'set' in desc) {
-          Object.defineProperty(instance, key, {
-            ...desc,
-            configurable: true // 🔑 make it replaceable
-          });
-        } else if (typeof desc.value === 'function') {
-          Object.defineProperty(instance, key, {
-            value: desc.value.bind(instance),
-            writable: true,     // 🔑 allow reassignment
-            configurable: true, // 🔑 allow redefinition
-            enumerable: false
-          });
-        } else {
-          Object.defineProperty(instance, key, {
-            value: desc.value,
-            writable: true,
-            configurable: true,
-            enumerable: true
-          });
-        }
-      }
-    }
-
-    const register = (target, ...mixins) => {
-      console.log(target);
-      // return register_to_class(target, ...mixins)
-      if(typeof target === 'function') register_to_class(target, ...mixins);
-      else register_to_instance(target, ...mixins);
-      };
-
     if(!globalThis.__Ziko__) __init__global__();
 
         // HMR persistence
-    if (undefined) {
-        undefined.data.__Ziko__ = undefined.data.__Ziko__ || globalThis.__Ziko__;
+    if (undefined?.data) {
+        undefined.data.__Ziko__ = undefined.data?.__Ziko__ || globalThis?.__Ziko__;
         globalThis.__Ziko__ = undefined.data.__Ziko__;
         // import.meta.hot.accept(n=>console.log(n));
         // console.log(import.meta.hot.data.__Ziko__.__State__.store)
@@ -1618,7 +1579,7 @@
       return this;
     }
     function _set_attrs_(name, value){
-        if(this.element?.tagName !== "svg") name = is_camelcase$1(name) ? camel2hyphencase$1(name) : name;
+        if(this.element instanceof globalThis?.SVGAElement) name = is_camelcase$1(name) ? camel2hyphencase$1(name) : name;
         if(this?.attr[name] && this?.attr[name]===value) return;
         if(isStateGetter(value)){
             const getter = value();
@@ -3167,10 +3128,11 @@
     const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
     let UIElement$1 = class UIElement extends UIElementCore{
-      constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render}={}){
-        super({element, name, type, render});
-        console.log(this);
-        register(
+      constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
+        super();
+        // console.log({type})
+        // console.log(this)
+        register_to_class(
           this, 
           AttrsMethods, 
           DomMethods, 
@@ -3425,7 +3387,6 @@
       'sub',
       'summary',
       'sup',
-      'svg',
       'table',
       'tbody',
       'td',
@@ -3459,6 +3420,9 @@
         "desc", "title", "metadata", "foreignObject"
       ];
 
+    // const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+    // const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+
     const tags = new Proxy({}, {
       get(target, prop) {
         if (typeof prop !== 'string') return undefined;
@@ -3466,16 +3430,22 @@
         let type ;
         if(HTMLTags.includes(tag)) type = 'html';
         if(SVGTags.includes(tag)) type = 'svg';
+        // console.log(type)
         return (...args)=>{
           // Fix undefined
           // console.log(isStateGetter(args[0]))
+          // console.log(!!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())
           ) return new UIElement$1({element : tag, name : tag, type}).append(...args);
           // console.log(args[0])
-          return new UIElement$1({element : tag}).setAttr(args.shift()).append(...args)
+          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)=>{
@@ -3627,6 +3597,68 @@
 
     const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
 
+    class UIHTMLWrapper extends UIElement$1 {
+        constructor(content){
+            super({element : 'div', name : 'html_wrappper'});
+            this.element.append(html2dom(content));
+            this.style({
+                display : 'contents'
+            });
+        }
+    }
+
+    function html2dom(htmlString) {
+        if(globalThis?.DOMParser){
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
+            doc.body.firstChild.style.display = "contents";
+            return doc.body.firstChild;
+        }
+    }
+
+    const HTMLWrapper = (content) => new UIHTMLWrapper(content);
+
+    class UISVGWrapper extends UIElement$1 {
+        constructor(content){
+            super({element : 'div', name : 'html_wrappper'});
+            this.element.append(svg2dom(content));
+            this.style({
+                display : 'contents'
+            });
+        }
+    }
+
+    function svg2dom(svgString) {
+      if (typeof DOMParser !== "undefined") {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
+        const svg = doc.documentElement;
+
+        if (svg.nodeName === "parsererror") {
+          throw new Error("Invalid SVG string");
+        }
+        if(svg.hasAttribute('xmlns')) return svg
+        // TO Fix ...
+        const {children, attributes} = svg;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        for(let {name, value} of attributes){
+          element.setAttribute(name, value);
+        }
+        element.append(...children);
+
+        globalThis.svg = svg;
+        globalThis.children = children; 
+        globalThis.attributes = attributes;
+        globalThis.element = element;
+        return element;
+      }
+      throw new Error("DOMParser is not available in this environment");
+    }
+
+
+
+    const SVGWrapper = (content) => new UISVGWrapper(content);
+
     function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
         if (globalThis.customElements?.get(name)) {
             console.warn(`Custom element "${name}" is already defined`);
@@ -5501,11 +5533,12 @@
        const normalizedPath = inputPath.replace(/\\/g, '/').replace(/\[(\w+)\]/g, '$1/:$1');
        const parts = normalizedPath.split('/');
        const rootParts = root.split('/');
-       const rootIndex = parts.indexOf(rootParts[rootParts.length - 1]);
+       const rootIndex = parts.indexOf(rootParts.at(-1));
        if (rootIndex !== -1) {
            const subsequentParts = parts.slice(rootIndex + 1);
-           const lastPart = subsequentParts[subsequentParts.length - 1];
+           const lastPart = parts.at(-1);
            const isIndexFile = lastPart === 'index.js' || lastPart === 'index.ts';
+        //    console.log({extensions, subsequentParts, lastPart, isIndexFile, rootParts, rootIndex, parts})
            const hasValidExtension = extensions.some(ext => lastPart === `.${ext}` || lastPart.endsWith(`.${ext}`));
            if (isIndexFile) {
                return '/' + (subsequentParts.length > 1 ? subsequentParts.slice(0, -1).join('/') : '');
@@ -5878,6 +5911,7 @@
     exports.Elastic = Elastic;
     exports.FileBasedRouting = FileBasedRouting;
     exports.Flex = Flex;
+    exports.HTMLWrapper = HTMLWrapper;
     exports.InBack = InBack;
     exports.InBounce = InBounce;
     exports.InCirc = InCirc;
@@ -5915,6 +5949,7 @@
     exports.Permutation = Permutation;
     exports.Random = Random;
     exports.SPA = SPA;
+    exports.SVGWrapper = SVGWrapper;
     exports.Scheduler = Scheduler;
     exports.Step = Step;
     exports.Suspense = Suspense;
@@ -5923,7 +5958,9 @@
     exports.TimeLoop = TimeLoop;
     exports.TimeScheduler = TimeScheduler;
     exports.UIElement = UIElement$1;
+    exports.UIHTMLWrapper = UIHTMLWrapper;
     exports.UINode = UINode;
+    exports.UISVGWrapper = UISVGWrapper;
     exports.Utils = Utils;
     exports.ZikoApp = ZikoApp;
     exports.ZikoCustomEvent = ZikoCustomEvent;