ziko 0.0.21 → 0.0.22

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 : Sun Dec 08 2024 23:39:16 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,10 +4849,14 @@ const Reactivity={
 };
 
 class ZikoUIElement {
-  constructor(element ,name="") {
+  constructor(element ,name="", el_type="html") {
     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")
+      }
     }
     if(element)this.__ele__ = element;
     this.uuid=this.constructor.name+"-"+Random.string(10);
@@ -4976,7 +4980,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 +5010,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 +6254,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 +6499,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 {
@@ -11947,6 +12087,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 +12152,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 : Sun Dec 08 2024 23:39:16 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,10 +4851,14 @@
     };
 
     class ZikoUIElement {
-      constructor(element ,name="") {
+      constructor(element ,name="", el_type="html") {
         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")
+          }
         }
         if(element)this.__ele__ = element;
         this.uuid=this.constructor.name+"-"+Random.string(10);
@@ -4978,7 +4982,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 +5012,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 +6256,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 +6501,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 {
@@ -11949,6 +12089,7 @@
     exports.h6 = h6;
     exports.hSlider = hSlider;
     exports.hSplitter = hSplitter;
+    exports.hTags = hTags;
     exports.hr = hr;
     exports.hrs = hrs;
     exports.html = html;
@@ -12013,6 +12154,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;