ziko 0.0.30 → 0.32.0

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Jul 29 2025 15:18:10 GMT+0100 (UTC+01:00)
+  Date : Wed Jul 30 2025 15:18:05 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
@@ -4659,7 +4659,7 @@ class ZikoUIElement {
       intersection:null
     };
     this.uuid = `${this.cache.name}-${Random.string(16)}`;
-    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index(); 
+    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
     this.cache.style.linkTo(this);
     useDefaultStyle && this.style({ 
       position: "relative",
@@ -4672,14 +4672,24 @@ class ZikoUIElement {
     this.items = [];
     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-ui-index", this.ui_index);
-    if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
-      globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this);
-  }
+    if(
+      // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
+      // && 
+      // !globalThis.__Ziko__.__Config__.isSSC
+      // && 
+      this.isInteractive()
+    ){
+      this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
+      globalThis.__Ziko__.__HYDRATION__.map.set(globalThis.__Ziko__.__HYDRATION__.index, ()=>this);
+      globalThis.__Ziko__.__HYDRATION__.increment();
+    }
   }
   get element(){
     return this.__ele__;
   }
+  isInteractive(){
+    return [true, false][Math.floor(2*Math.random())];
+  }
   get isZikoUIElement(){
     return true;
   }
@@ -6935,7 +6945,7 @@ const tags = new Proxy({}, {
     if (typeof prop !== 'string') return undefined;
     let tag = prop.replaceAll("_","-").toLowerCase();
     switch(tag){
-      case "html"  :
+      case "html"  : globalThis?.document?.createElement("html");
       case "head"  :
       case "style" :
       case "link"  :
@@ -9146,6 +9156,13 @@ const __UI__={
         
     }
 };
+const __HYDRATION__ = {
+    map : new Map(),
+    index : 0,
+    increment : function(){
+        return this.index ++
+    }
+};
 const __HYDRATION_MAP__ = new Map();
 const __Config__={
     default:{
@@ -9158,9 +9175,11 @@ const __Config__={
     setDefault:function(pairs){
         const keys=Object.keys(pairs);
         const values=Object.values(pairs);
-        for(let i=0;i<keys.length;i++)this.default[keys[i]]=values[i];
+        for(let i=0; i<keys.length; i++) this.default[keys[i]]=values[i];
+    },
+    init:()=>{
+        // document.documentElement.setAttribute("data-engine","zikojs")
     },
-    init:()=>document.documentElement.setAttribute("data-engine","zikojs"),
     renderingMode :"spa",
     isSSC : false,
 };
@@ -9176,6 +9195,7 @@ var Global = /*#__PURE__*/Object.freeze({
     __CACHE__: __CACHE__,
     __Config__: __Config__,
     __HYDRATION_MAP__: __HYDRATION_MAP__,
+    __HYDRATION__: __HYDRATION__,
     __UI__: __UI__
 });
 
@@ -9275,6 +9295,7 @@ if ( globalThis.__Ziko__ ) {
 		globalThis.__Ziko__={
             ...Ziko,
             __UI__,
+            __HYDRATION__,
             __HYDRATION_MAP__,
             __Config__,
             __CACHE__,
@@ -9311,4 +9332,4 @@ function RemoveAll(){
     Data.RemoveAll();
 }
 
-export { App$1 as App, Article, Aside, Base, Canvas, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Nav, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Section, Str, Suspense, Svg, Table$1 as Table, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventHash, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoUIAbbrText, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUICanvas, ZikoUICodeText, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, 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, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __CACHE__, __Config__, __HYDRATION_MAP__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h, h1, h2, h3, h4, h5, h6, hTags, hr, hrs, html, hypot, image, inRange, 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, matrix, matrix2, matrix3, matrix4, max, 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, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useChannel$1 as useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFocusEvent, useFps, 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, video, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { App$1 as App, Article, Aside, Base, Canvas, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Nav, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Section, Str, Suspense, Svg, Table$1 as Table, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventHash, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoUIAbbrText, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUICanvas, ZikoUICodeText, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, 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, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __CACHE__, __Config__, __HYDRATION_MAP__, __HYDRATION__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h, h1, h2, h3, h4, h5, h6, hTags, hr, hrs, html, hypot, image, inRange, 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, matrix, matrix2, matrix3, matrix4, max, 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, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useChannel$1 as useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFocusEvent, useFps, 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, video, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.30",
+  "version": "0.32.0",
   "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",

package/src/app/globals.js

@@ -20,6 +20,13 @@ const __UI__={
         
     }
 }
+const __HYDRATION__ = {
+    map : new Map(),
+    index : 0,
+    increment : function(){
+        return this.index ++
+    }
+}
 const __HYDRATION_MAP__ = new Map()
 const __Config__={
     default:{
@@ -32,9 +39,11 @@ const __Config__={
     setDefault:function(pairs){
         const keys=Object.keys(pairs);
         const values=Object.values(pairs);
-        for(let i=0;i<keys.length;i++)this.default[keys[i]]=values[i];
+        for(let i=0; i<keys.length; i++) this.default[keys[i]]=values[i];
+    },
+    init:()=>{
+        // document.documentElement.setAttribute("data-engine","zikojs")
     },
-    init:()=>document.documentElement.setAttribute("data-engine","zikojs"),
     renderingMode :"spa",
     isSSC : false,
 }
@@ -48,5 +57,6 @@ export {
     __UI__,
     __HYDRATION_MAP__,
     __Config__,
-    __CACHE__
+    __CACHE__,
+    __HYDRATION__
 }

package/src/events/__ZikoEvent__.js

@@ -33,8 +33,11 @@ class __ZikoEvent__ {
             callbacks : {},
             __controllers__:{}
         }
-        const events = Events.map(n=>getEvent(n))
-        events.forEach((event,i)=>{
+        if(Events)this._register_events(Events, details_setter, customizer);
+    }
+    _register_events(Events, details_setter, customizer, REGISTER_METHODES = true){
+        const events = Events?.map(n=>getEvent(n))
+        events?.forEach((event,i)=>{
             Object.assign(this.cache.preventDefault, {[event] : false});
             Object.assign(this.cache.options, {[event] : {}});
             Object.assign(this.cache.paused, {[event] : false});
@@ -42,8 +45,9 @@ class __ZikoEvent__ {
             Object.assign(this.cache.stream.clear, {[event] : false});
             Object.assign(this.cache.stream.history, {[event] : []});
             Object.assign(this.cache.__controllers__, {[event] : e=>event_controller.call(this, e, event, details_setter, customizer)});
-            Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)})
+            if(REGISTER_METHODES)Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)})
         })
+        return this;
     }
     get targetElement(){
         return this.target?.element;

package/src/events/custom-event.js

@@ -0,0 +1,29 @@
+import { __ZikoEvent__ } from "./__ZikoEvent__.js";
+class ZikoEventCustom extends __ZikoEvent__{
+    constructor(target, events, customizer){
+        super(target, events, details_setter, customizer)
+    }
+    _register_events(events){
+        super._register_events(events, null, null, false);
+        return this;
+    }
+    emit(event_name, details = {}){
+        const event=new Event(event_name);
+        this.targetElement.dispatchEvent(event);
+        return this;
+    }
+    on(event_name, ...callbacks){
+        if(!this.cache.options.hasOwnProperty(event_name)) this._register_events([event_name]);
+        this.__onEvent(event_name, this.cache.options[event_name], {}, ...callbacks);
+        return this;
+    }
+}
+function details_setter(){
+
+}
+const bindCustomEvent = (target, events, customizer) => new ZikoEventCustom(target, events, customizer)
+
+export{
+    bindCustomEvent,
+    ZikoEventCustom
+}

package/src/events/index.js

@@ -1,6 +1,6 @@
 export * from "./click.js";
 export * from "./clipboard.js";
-// export * from "./custom-event.js";
+export * from "./custom-event.js";
 export * from "./drag.js";
 export * from "./focus.js";
 export * from "./hash.js";

package/src/events/types/__Shared__.d.ts

@@ -47,6 +47,13 @@ export declare class __ZikoEvent__ {
   get currentEvent(): string | null;
   get event(): Event | null;
 
+  _register_events(
+    Events: string[] | undefined,
+    details_setter: (e: this) => any,
+    customizer: (e: this) => any, // To Check
+    REGISTER_METHODES?: boolean
+  ): this;
+
   setTarget(UI: any): this;
 
   preventDefault(

package/src/index.js

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

package/src/reactivity/events/__note__

@@ -0,0 +1 @@
+Should removed

package/src/ui/elements/ZikoUIElement.js

@@ -65,7 +65,7 @@ class ZikoUIElement {
       intersection:null
     }
     this.uuid = `${this.cache.name}-${Random.string(16)}`
-    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index() 
+    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
     this.cache.style.linkTo(this);
     useDefaultStyle && this.style({ 
       position: "relative",
@@ -78,14 +78,24 @@ class ZikoUIElement {
     this.items = [];
     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-ui-index", this.ui_index);
-    if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
-      globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this)
-  }
+    if(
+      // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
+      // && 
+      // !globalThis.__Ziko__.__Config__.isSSC
+      // && 
+      this.isInteractive()
+    ){
+      this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
+      globalThis.__Ziko__.__HYDRATION__.map.set(globalThis.__Ziko__.__HYDRATION__.index, ()=>this);
+      globalThis.__Ziko__.__HYDRATION__.increment()
+    }
   }
   get element(){
     return this.__ele__;
   }
+  isInteractive(){
+    return [true, false][Math.floor(2*Math.random())];
+  }
   get isZikoUIElement(){
     return true;
   }

package/src/ui/tags/index.js

@@ -1,18 +1,46 @@
 import ZikoUIElement from "../elements/ZikoUIElement.js";
+import { HTMLTags, SVGTags } from "./tags.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; 
+}
+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;
     let tag = prop.replaceAll("_","-").toLowerCase();
-    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 ZikoUIElement(tag);
+    if(HTMLTags.includes(tag)) return (...args)=>{
+      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+        let attributes = args.shift()
+        console.log(args)
+        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+      }
+      return new ZikoUIElement(tag).append(...args);
+    }
+    if(SVGTags.includes(tag)) return (...args)=>new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
+    return (...args)=>{
+      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+        let attributes = args.shift()
+        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+      }
+      return new ZikoUIElement(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 ZikoUIElement(tag);
+    // }
   }
 });
 

package/src/ui/tags/tags.js

@@ -0,0 +1,126 @@
+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"
+  ];
+
+export{
+    HTMLTags,
+    SVGTags
+}