ziko 0.0.21 → 0.0.23

package/README.md

@@ -96,11 +96,11 @@ Currently supported frameworks:
 
 ```md
 ---
- module : 
-  - import InteractiveBlock from "./InteractiveBlock"
  title : Article 1
 ---
 
+import InteractiveBlock from "./InteractiveBlock";
+
 # Hello World this is markdown heading 
 
 <InteractiveBlock data = "Hello" />

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Dec 08 2024 12:19:40 GMT+0100 (UTC+01:00)
+  Date : Sat Jan 04 2025 21:24:21 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
@@ -4849,13 +4849,19 @@ const Reactivity={
 };
 
 class ZikoUIElement {
-  constructor(element ,name="") {
+  constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
-      element === "svg" ? element=globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", "svg"): element = globalThis?.document?.createElement(element);
+      switch(el_type){
+        case "html" : element = globalThis?.document?.createElement(element); break;
+        case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
+        default : throw Error("Not supported")
+      }
+    }
+    else {
+      this.target = element.parentElement;
     }
     if(element)this.__ele__ = element;
-    this.uuid=this.constructor.name+"-"+Random.string(10);
     this.cache = {
       name,
       parent:null,
@@ -4886,23 +4892,30 @@ class ZikoUIElement {
       resize:null,
       intersection:null
     };
+    this.uuid = `${this.cache.name}-${Random.string(16)}`;
     this.cache.style.linkTo(this);
-    this.style({ 
+    useDefaultStyle && this.style({ 
       position: "relative",
       boxSizing:"border-box",
       margin:0,
       padding:0,
+      width : "auto",
+      height : "auto"
      });
     this.items = [];
-    this.size("auto", "auto");
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && globalThis.__Ziko__.__Config__.default.render && this.render();
+    this.setAttr("data-ref", this.uuid);
+    globalThis.__Ziko__.__HYDRATION_MAP__.push({
+      ref : this.uuid,
+      comp : ()=>this
+    });
   }
   get element(){
-    return this.__ele__
+    return this.__ele__;
   }
   get isZikoUIElement(){
-    return true
+    return true;
   }
   get st(){
     return this.cache.style;
@@ -4911,7 +4924,7 @@ class ZikoUIElement {
     return this.cache.attributes;
   }
   get evt(){
-    return this.cache.events;
+    return this.events;
   }
   get html(){
     return this.element.innerHTML;
@@ -4976,7 +4989,7 @@ class ZikoUIElement {
       return this;
     }
     for (let i = 0; i < ele.length; i++) {
-      if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+      if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
       if (ele[i] instanceof ZikoUIElement) {
         ele[i].cache.parent = this;
         this.element[adder](ele[i].element);
@@ -5006,7 +5019,7 @@ class ZikoUIElement {
     if (index >= this.element.children.length) this.append(...ele);
     else
       for (let i = 0; i < ele.length; i++) {
-        if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+        if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
         this.element?.insertBefore(ele[i].element, this.items[index].element);
         this.items.splice(index, 0, ele[i]);
       }
@@ -6250,14 +6263,147 @@ class ZikoUISuspense extends ZikoUIElement{
 
 const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
 
-function h(tag, attributes = {}, ...children){
-    const {name, style, ...attrs} = attributes;
-    let element = new ZikoUIElement(tag,name);
+const _h=(tag, type, attributes, ...children)=>{
+    const { name, style, ...attrs } = attributes;
+    let element = new ZikoUIElement(tag, name, type);
     style && element.style(style);
     attrs && element.setAttr(attrs);
     children && element.append(...children);
-    return element
-}
+    return element; 
+};
+const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+
+const HTMLTags = [
+  'a',
+  'abb',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hgroup',
+  'hr',
+  'i',
+  'iframe',
+  'img',
+  'ipnut',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'main',
+  'map',
+  'mark',
+  'menu',
+  'meter',
+  'nav',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'search',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'svg',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr'
+];
+
+const SVGTags = [
+    "svg", "g", "defs", "symbol", "use", "image", "switch",
+    "rect", "circle", "ellipse", "line", "polyline", "polygon", "path",
+    "text", "tspan", "textPath", "altGlyph", "altGlyphDef", "altGlyphItem", "glyph", "glyphRef",
+    "linearGradient", "radialGradient", "pattern", "solidColor",
+    "filter", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
+    "feDiffuseLighting", "feDisplacementMap", "feDropShadow", "feFlood", "feFuncA", "feFuncR", "feFuncG", "feFuncB",
+    "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "feSpecularLighting",
+    "feTile", "feTurbulence",
+    "animate", "animateMotion", "animateTransform", "set",
+    "script",
+    "desc", "title", "metadata", "foreignObject"
+  ];
+  
+const hTags = HTMLTags.reduce((acc, key) => {
+  acc[key] = (attr, ...children) => h(key, attr, ...children);
+  return acc;
+}, {});
+const sTags = SVGTags.reduce((acc, key) => {
+    acc[key] = (attr, ...children) => h(key, attr, ...children);
+    return acc;
+  }, {});
 
 class ZikoUIHtmlTag extends ZikoUIContainerElement {
   constructor(element) {
@@ -6362,10 +6508,13 @@ var Misc = /*#__PURE__*/Object.freeze({
     brs: brs,
     btn: btn,
     h: h,
+    hTags: hTags,
     hr: hr,
     hrs: hrs,
     html: html,
-    link: link
+    link: link,
+    s: s,
+    sTags: sTags
 });
 
 class ZikoUIInputImage extends ZikoUIElement {
@@ -11590,6 +11739,7 @@ function defineParamsGetter(target ){
 }
 
 const __UI__={};
+const __HYDRATION_MAP__ = [];
 const __Config__={
     default:{
         target:null,
@@ -11609,6 +11759,7 @@ const __Config__={
 var Global = /*#__PURE__*/Object.freeze({
     __proto__: null,
     __Config__: __Config__,
+    __HYDRATION_MAP__: __HYDRATION_MAP__,
     __UI__: __UI__
 });
 
@@ -11708,6 +11859,7 @@ if ( globalThis.__Ziko__ ) {
 		globalThis.__Ziko__={
             ...Ziko,
             __UI__,
+            __HYDRATION_MAP__,
             __Config__,
             ExtractAll,
             RemoveAll
@@ -11877,6 +12029,7 @@ exports.ZikoUIXMLWrapper = ZikoUIXMLWrapper;
 exports.ZikoUseRoot = ZikoUseRoot;
 exports.ZikoUseStyle = ZikoUseStyle;
 exports.__Config__ = __Config__;
+exports.__HYDRATION_MAP__ = __HYDRATION_MAP__;
 exports.__UI__ = __UI__;
 exports.abbrText = abbrText;
 exports.abs = abs;
@@ -11947,6 +12100,7 @@ exports.h5 = h5;
 exports.h6 = h6;
 exports.hSlider = hSlider;
 exports.hSplitter = hSplitter;
+exports.hTags = hTags;
 exports.hr = hr;
 exports.hrs = hrs;
 exports.html = html;
@@ -12011,6 +12165,8 @@ exports.rad2deg = rad2deg;
 exports.radio = radio;
 exports.removeExtraSpace = removeExtraSpace;
 exports.round = round;
+exports.s = s;
+exports.sTags = sTags;
 exports.search = search;
 exports.sec = sec;
 exports.select = select;

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Dec 08 2024 12:19:40 GMT+0100 (UTC+01:00)
+  Date : Sat Jan 04 2025 21:24:21 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
@@ -4851,13 +4851,19 @@
     };
 
     class ZikoUIElement {
-      constructor(element ,name="") {
+      constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
         this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
         if(typeof element === "string") {
-          element === "svg" ? element=globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", "svg"): element = globalThis?.document?.createElement(element);
+          switch(el_type){
+            case "html" : element = globalThis?.document?.createElement(element); break;
+            case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
+            default : throw Error("Not supported")
+          }
+        }
+        else {
+          this.target = element.parentElement;
         }
         if(element)this.__ele__ = element;
-        this.uuid=this.constructor.name+"-"+Random.string(10);
         this.cache = {
           name,
           parent:null,
@@ -4888,23 +4894,30 @@
           resize:null,
           intersection:null
         };
+        this.uuid = `${this.cache.name}-${Random.string(16)}`;
         this.cache.style.linkTo(this);
-        this.style({ 
+        useDefaultStyle && this.style({ 
           position: "relative",
           boxSizing:"border-box",
           margin:0,
           padding:0,
+          width : "auto",
+          height : "auto"
          });
         this.items = [];
-        this.size("auto", "auto");
         globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
         element && globalThis.__Ziko__.__Config__.default.render && this.render();
+        this.setAttr("data-ref", this.uuid);
+        globalThis.__Ziko__.__HYDRATION_MAP__.push({
+          ref : this.uuid,
+          comp : ()=>this
+        });
       }
       get element(){
-        return this.__ele__
+        return this.__ele__;
       }
       get isZikoUIElement(){
-        return true
+        return true;
       }
       get st(){
         return this.cache.style;
@@ -4913,7 +4926,7 @@
         return this.cache.attributes;
       }
       get evt(){
-        return this.cache.events;
+        return this.events;
       }
       get html(){
         return this.element.innerHTML;
@@ -4978,7 +4991,7 @@
           return this;
         }
         for (let i = 0; i < ele.length; i++) {
-          if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+          if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
           if (ele[i] instanceof ZikoUIElement) {
             ele[i].cache.parent = this;
             this.element[adder](ele[i].element);
@@ -5008,7 +5021,7 @@
         if (index >= this.element.children.length) this.append(...ele);
         else
           for (let i = 0; i < ele.length; i++) {
-            if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+            if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
             this.element?.insertBefore(ele[i].element, this.items[index].element);
             this.items.splice(index, 0, ele[i]);
           }
@@ -6252,14 +6265,147 @@
 
     const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
 
-    function h(tag, attributes = {}, ...children){
-        const {name, style, ...attrs} = attributes;
-        let element = new ZikoUIElement(tag,name);
+    const _h=(tag, type, attributes, ...children)=>{
+        const { name, style, ...attrs } = attributes;
+        let element = new ZikoUIElement(tag, name, type);
         style && element.style(style);
         attrs && element.setAttr(attrs);
         children && element.append(...children);
-        return element
-    }
+        return element; 
+    };
+    const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+    const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+
+    const HTMLTags = [
+      'a',
+      'abb',
+      'address',
+      'area',
+      'article',
+      'aside',
+      'audio',
+      'b',
+      'base',
+      'bdi',
+      'bdo',
+      'blockquote',
+      'br',
+      'button',
+      'canvas',
+      'caption',
+      'cite',
+      'code',
+      'col',
+      'colgroup',
+      'data',
+      'datalist',
+      'dd',
+      'del',
+      'details',
+      'dfn',
+      'dialog',
+      'div',
+      'dl',
+      'dt',
+      'em',
+      'embed',
+      'fieldset',
+      'figcaption',
+      'figure',
+      'footer',
+      'form',
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'header',
+      'hgroup',
+      'hr',
+      'i',
+      'iframe',
+      'img',
+      'ipnut',
+      'ins',
+      'kbd',
+      'label',
+      'legend',
+      'li',
+      'main',
+      'map',
+      'mark',
+      'menu',
+      'meter',
+      'nav',
+      'object',
+      'ol',
+      'optgroup',
+      'option',
+      'output',
+      'p',
+      'param',
+      'picture',
+      'pre',
+      'progress',
+      'q',
+      'rp',
+      'rt',
+      'ruby',
+      's',
+      'samp',
+      'search',
+      'section',
+      'select',
+      'small',
+      'source',
+      'span',
+      'strong',
+      'sub',
+      'summary',
+      'sup',
+      'svg',
+      'table',
+      'tbody',
+      'td',
+      'template',
+      'textarea',
+      'tfoot',
+      'th',
+      'thead',
+      'time',
+      'title',
+      'tr',
+      'track',
+      'u',
+      'ul',
+      'var',
+      'video',
+      'wbr'
+    ];
+
+    const SVGTags = [
+        "svg", "g", "defs", "symbol", "use", "image", "switch",
+        "rect", "circle", "ellipse", "line", "polyline", "polygon", "path",
+        "text", "tspan", "textPath", "altGlyph", "altGlyphDef", "altGlyphItem", "glyph", "glyphRef",
+        "linearGradient", "radialGradient", "pattern", "solidColor",
+        "filter", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
+        "feDiffuseLighting", "feDisplacementMap", "feDropShadow", "feFlood", "feFuncA", "feFuncR", "feFuncG", "feFuncB",
+        "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "feSpecularLighting",
+        "feTile", "feTurbulence",
+        "animate", "animateMotion", "animateTransform", "set",
+        "script",
+        "desc", "title", "metadata", "foreignObject"
+      ];
+      
+    const hTags = HTMLTags.reduce((acc, key) => {
+      acc[key] = (attr, ...children) => h(key, attr, ...children);
+      return acc;
+    }, {});
+    const sTags = SVGTags.reduce((acc, key) => {
+        acc[key] = (attr, ...children) => h(key, attr, ...children);
+        return acc;
+      }, {});
 
     class ZikoUIHtmlTag extends ZikoUIContainerElement {
       constructor(element) {
@@ -6364,10 +6510,13 @@
         brs: brs,
         btn: btn,
         h: h,
+        hTags: hTags,
         hr: hr,
         hrs: hrs,
         html: html,
-        link: link
+        link: link,
+        s: s,
+        sTags: sTags
     });
 
     class ZikoUIInputImage extends ZikoUIElement {
@@ -11592,6 +11741,7 @@
     }
 
     const __UI__={};
+    const __HYDRATION_MAP__ = [];
     const __Config__={
         default:{
             target:null,
@@ -11611,6 +11761,7 @@
     var Global = /*#__PURE__*/Object.freeze({
         __proto__: null,
         __Config__: __Config__,
+        __HYDRATION_MAP__: __HYDRATION_MAP__,
         __UI__: __UI__
     });
 
@@ -11710,6 +11861,7 @@
     		globalThis.__Ziko__={
                 ...Ziko,
                 __UI__,
+                __HYDRATION_MAP__,
                 __Config__,
                 ExtractAll,
                 RemoveAll
@@ -11879,6 +12031,7 @@
     exports.ZikoUseRoot = ZikoUseRoot;
     exports.ZikoUseStyle = ZikoUseStyle;
     exports.__Config__ = __Config__;
+    exports.__HYDRATION_MAP__ = __HYDRATION_MAP__;
     exports.__UI__ = __UI__;
     exports.abbrText = abbrText;
     exports.abs = abs;
@@ -11949,6 +12102,7 @@
     exports.h6 = h6;
     exports.hSlider = hSlider;
     exports.hSplitter = hSplitter;
+    exports.hTags = hTags;
     exports.hr = hr;
     exports.hrs = hrs;
     exports.html = html;
@@ -12013,6 +12167,8 @@
     exports.radio = radio;
     exports.removeExtraSpace = removeExtraSpace;
     exports.round = round;
+    exports.s = s;
+    exports.sTags = sTags;
     exports.search = search;
     exports.sec = sec;
     exports.select = select;