ziko 0.0.21 → 0.0.23

package/dist/ziko.mjs

@@ -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
@@ -4845,13 +4845,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,
@@ -4882,23 +4888,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;
@@ -4907,7 +4920,7 @@ class ZikoUIElement {
     return this.cache.attributes;
   }
   get evt(){
-    return this.cache.events;
+    return this.events;
   }
   get html(){
     return this.element.innerHTML;
@@ -4972,7 +4985,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);
@@ -5002,7 +5015,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]);
       }
@@ -6246,14 +6259,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) {
@@ -6358,10 +6504,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 {
@@ -11586,6 +11735,7 @@ function defineParamsGetter(target ){
 }
 
 const __UI__={};
+const __HYDRATION_MAP__ = [];
 const __Config__={
     default:{
         target:null,
@@ -11605,6 +11755,7 @@ const __Config__={
 var Global = /*#__PURE__*/Object.freeze({
     __proto__: null,
     __Config__: __Config__,
+    __HYDRATION_MAP__: __HYDRATION_MAP__,
     __UI__: __UI__
 });
 
@@ -11704,6 +11855,7 @@ if ( globalThis.__Ziko__ ) {
 		globalThis.__Ziko__={
             ...Ziko,
             __UI__,
+            __HYDRATION_MAP__,
             __Config__,
             ExtractAll,
             RemoveAll
@@ -11738,4 +11890,4 @@ function RemoveAll(){
     Data.RemoveAll();
 }
 
-export { Accordion, App$1 as App, Article, Aside, Base, Breadcrumbs, Canvas, Carousel, CodeCell, CodeNote, Collapsible, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex$1 as Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Modal, Nav, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Section, Slider, Splitter, Str, Suspense, Svg, Table$1 as Table, Tabs, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventHash, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoSvgCircle, ZikoSvgEllipse, ZikoSvgForeignObject, ZikoSvgGroupe, ZikoSvgImage, ZikoSvgLine, ZikoSvgLink, ZikoSvgPath, ZikoSvgRectangle, ZikoSvgText, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUIBreadcrumbs, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIContainerElement, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex$1 as ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, ZikoUIHorizontalSlider, ZikoUIHorizontalSplitter, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUIMenu3d, ZikoUIModal, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVerticalSlider, ZikoUIVerticalSplitter, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __Config__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, adoc2html, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, dangerAlert, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h, h1, h2, h3, h4, h5, h6, hSlider, hSplitter, hr, hrs, html, hypot, image, inRange, infoAlert, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, jsonStyleSheet, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, menu3d, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, preload, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, successAlert, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useChannel$1 as useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFocusEvent, useFps, useGeolocation, useHashEvent, useHead$1 as useHead, useInputEvent, useKeyEvent, useLocaleStorage, useMediaQuery, useMeta$1 as useMeta, useMouseEvent, usePointerEvent, useRoot, useRootValue, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useThread, useThrottle, useTimeLoop, useTitle$1 as useTitle, useType, useWheelEvent, vSlider, vSplitter, video, wait, waitForUIElm, waitForUIElmSync, warningAlert, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { Accordion, App$1 as App, Article, Aside, Base, Breadcrumbs, Canvas, Carousel, CodeCell, CodeNote, Collapsible, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex$1 as Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Modal, Nav, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Section, Slider, Splitter, Str, Suspense, Svg, Table$1 as Table, Tabs, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventHash, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoSvgCircle, ZikoSvgEllipse, ZikoSvgForeignObject, ZikoSvgGroupe, ZikoSvgImage, ZikoSvgLine, ZikoSvgLink, ZikoSvgPath, ZikoSvgRectangle, ZikoSvgText, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUIBreadcrumbs, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIContainerElement, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex$1 as ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, ZikoUIHorizontalSlider, ZikoUIHorizontalSplitter, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUIMenu3d, ZikoUIModal, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVerticalSlider, ZikoUIVerticalSplitter, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __Config__, __HYDRATION_MAP__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, adoc2html, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, dangerAlert, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h, h1, h2, h3, h4, h5, h6, hSlider, hSplitter, hTags, hr, hrs, html, hypot, image, inRange, infoAlert, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, jsonStyleSheet, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, menu3d, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, preload, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, s, sTags, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, successAlert, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useChannel$1 as useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFocusEvent, useFps, useGeolocation, useHashEvent, useHead$1 as useHead, useInputEvent, useKeyEvent, useLocaleStorage, useMediaQuery, useMeta$1 as useMeta, useMouseEvent, usePointerEvent, useRoot, useRootValue, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useThread, useThrottle, useTimeLoop, useTitle$1 as useTitle, useType, useWheelEvent, vSlider, vSplitter, video, wait, waitForUIElm, waitForUIElmSync, warningAlert, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "a versatile javaScript framework offering a rich set of UI components, advanced mathematical utilities, reactivity, animations, client side routing and graphics capabilities",
   "keywords": [
     "front-end",
@@ -48,7 +48,6 @@
     "type": "git",
     "url": "git+https://github.com/zakarialaoui10/ziko.js.git"
   },
- 
   "author": "zakaria elalaoui",
   "license": "MIT",
   "bugs": {

package/src/app/globals.js

@@ -1,4 +1,5 @@
 const __UI__={}
+const __HYDRATION_MAP__ = []
 const __Config__={
     default:{
         target:null,
@@ -16,5 +17,6 @@ const __Config__={
 }
 export {
     __UI__,
+    __HYDRATION_MAP__,
     __Config__
 }

package/src/index.js

@@ -5,7 +5,7 @@ import Time from "./time";
 import Data from "./data";
 import Reactivity from "./reactivity";
 import Graphics from "./graphics";
-import App,{__UI__, __Config__, defineParamsGetter} from "./app";
+import App,{__UI__,__HYDRATION_MAP__, __Config__, defineParamsGetter} from "./app";
 
 export * from "./math";
 export * from "./ui";
@@ -45,6 +45,7 @@ if ( globalThis.__Ziko__ ) {
 		globalThis.__Ziko__={
             ...Ziko,
             __UI__,
+            __HYDRATION_MAP__,
             __Config__,
             ExtractAll,
             RemoveAll

package/src/ui/elements/primitives/ZikoUIElement.js

@@ -19,14 +19,21 @@ import {
 } from "../../../reactivity/index.js"
 import { Random } from "../../../math/index.js";
 import { Str } from "../../../data/index.js";
+import { text } from "./text/text.js";
 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,
@@ -57,23 +64,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;
@@ -82,7 +96,7 @@ class ZikoUIElement {
     return this.cache.attributes;
   }
   get evt(){
-    return this.cache.events;
+    return this.events;
   }
   get html(){
     return this.element.innerHTML;

package/src/ui/elements/primitives/misc/hyperscript.js

@@ -1,11 +1,144 @@
-import ZikoUIElement from "../ZikoUIElement.js";
-function h(tag, attributes = {}, ...children){
-    const {name, style, ...attrs} = attributes
-    let element = new ZikoUIElement(tag,name);
+import ZikoUIElement from '../ZikoUIElement.js';
+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
+    children && element.append(...children);
+    return element; 
 }
+const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
 
-export {h}
+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;
+  }, {});
+
+export { h, s, hTags, sTags };

package/starter/bin/index.js

@@ -1,11 +0,0 @@
-#!/usr/bin/env node
-import path from "path"
-import { fileURLToPath } from 'node:url';
-import { createFolder,copyFolder , runCommand } from "./utils/commands.js";
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const TEMPLATE = path.join(__dirname,"../template");
-const PROJECT_TITLE = process.argv[2]||"zikojs-project";
-createFolder(PROJECT_TITLE);
-copyFolder(TEMPLATE,path.join(process.cwd(),PROJECT_TITLE));
-runCommand(`cd ${PROJECT_TITLE} && npm install`);
-