ziko 0.0.15 → 0.0.17

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Oct 11 2024 15:24:58 GMT+0100 (UTC+01:00)
+  Date : Sun Oct 13 2024 19:56:33 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
@@ -3877,7 +3877,7 @@ class ZikoHead{
     }
 }
 
-const useHead$1=({ title, lang, icon, meta, noscript })=>new ZikoHead({ title, lang, icon, meta, noscript });
+const useHead=({ title, lang, icon, meta, noscript })=>new ZikoHead({ title, lang, icon, meta, noscript });
 
 const LightThemes={
     cozyCottonCandy: {
@@ -5794,7 +5794,7 @@ const Hooks={
     useTitle,
     useFavIcon,
     useMeta,
-    useHead: useHead$1,
+    useHead,
     useThrottle,
     useDebounce,
     useLocaleStorage,
@@ -7058,6 +7058,35 @@ class ZikoUIInputDateTime extends ZikoUIInput {
 }
 const inputDateTime = () => new ZikoUIInputDateTime();
 
+class ZikoUIXMLWrapper extends ZikoUIElement$1{
+    constructor(XMLContent, type){
+        super("div", "");
+        this.element.append(type==="svg"?svg2dom(XMLContent):html2dom(XMLContent));
+    }
+}
+function html2dom(htmlString) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
+    return doc.body.firstChild;
+  }
+function svg2dom(svgString) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    return doc.documentElement; // SVG elements are usually at the root
+}
+class ZikoUIHTMLWrapper extends ZikoUIXMLWrapper{
+    constructor(HTMLContent){
+        super(HTMLContent, "html");
+    }
+}
+class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
+    constructor(SVGContent){
+        super(SVGContent, "svg");
+    }
+}
+const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
+const SVGWrapper = (SVGContent) => new ZikoUIHTMLWrapper(SVGContent);
+
 class ZikoUIHtmlTag extends ZikoUIContainerElement {
   constructor(element) {
     super(element,"html");
@@ -7146,10 +7175,15 @@ class ZikoUIBr extends ZikoUIElement$1 {
 
 var Misc = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    HTMLWrapper: HTMLWrapper,
+    SVGWrapper: SVGWrapper,
     ZikoUIBr: ZikoUIBr,
+    ZikoUIHTMLWrapper: ZikoUIHTMLWrapper,
     ZikoUIHr: ZikoUIHr,
     ZikoUIHtmlTag: ZikoUIHtmlTag,
     ZikoUILink: ZikoUILink,
+    ZikoUISVGWrapper: ZikoUISVGWrapper,
+    ZikoUIXMLWrapper: ZikoUIXMLWrapper,
     br: br,
     brs: brs,
     btn: btn,
@@ -9509,7 +9543,9 @@ const UI$1 = {
     ...Table,
     ...Semantic,
     ...Misc,
-    ...Derived
+    ...Derived,
+    ZikoUIElement: ZikoUIElement$1,
+    ZikoUIContainerElement
 };
 
 const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
@@ -13273,7 +13309,7 @@ class ZikoApp {
         this.head && this.setHead(this.head);
         this.wrapper && this.setWrapper(this.wrapper);
         this.target && this.setTarget(this.target);
-        this.wrapper.render(this.target);
+        if(this.wrapper && this.target)this.wrapper.render(this.target);
     }
     setTarget(target){
         if(target instanceof HTMLElement) this.target = target;
@@ -13416,8 +13452,6 @@ function isDynamic(path) {
 class ZikoSPA extends ZikoApp{
     constructor({head, wrapper, target, routes}){
         super({head, wrapper, target});
-        // this.wrapper=wrapper;
-        console.log(target);
         this.routes=new Map([
             ["404",text$1("Error 404")],
             ...Object.entries(routes)
@@ -13444,6 +13478,7 @@ class ZikoSPA extends ZikoApp{
             if(typeof callback === "function") element = callback();  
         }
         if(element?.isZikoUIElement) element.render(this.wrapper);
+        // if(element?.isZikoApp) element.render(this.wrapper);
         if(element instanceof Promise){
             element.then(e=>e.render(this.wrapper));
         }
@@ -13468,7 +13503,7 @@ var Spa = /*#__PURE__*/Object.freeze({
     ZikoSPA: ZikoSPA
 });
 
-function parseParams(queryString) {
+function parseQueryParams(queryString) {
     const params = {};
     queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
         const [key, value] = match.split('=');
@@ -13477,19 +13512,19 @@ function parseParams(queryString) {
     return params;
 }
 
-function defineParamsGetter(target = globalThis){
+function defineParamsGetter(target ){
     Object.defineProperties(target, {
         'QueryParams': {
             get: function() {
-                return parseParams(location.search.substring(1));
+                return parseQueryParams(globalThis.location.search.substring(1));
             },
             configurable: false,
             enumerable: true 
         },
         'HashParams': {
             get: function() {
-                const hash = window.location.hash.substring(1);
-                return parseParams(hash);
+                const hash = globalThis.location.hash.substring(1);
+                return hash.split("#");
             },
             configurable: false,
             enumerable: true 
@@ -13497,11 +13532,6 @@ function defineParamsGetter(target = globalThis){
     });
 }
 
-var Params = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    defineParamsGetter: defineParamsGetter
-});
-
 const __UI__={};
 const __Config__={
     default:{
@@ -13525,12 +13555,71 @@ var Global = /*#__PURE__*/Object.freeze({
     __UI__: __UI__
 });
 
+// import.meta.glob('./src/pages/**/*.js')
+async function FileBasedRouting(pages /* use import.meta.glob */){
+   const routes = Object.keys(pages);
+   const root = findCommonPath(routes);
+   // console.log({root})
+   const pairs = {};
+   for(let i=0; i<routes.length; i++){
+      const module = await pages[routes[i]]();
+      const component = await module.default;
+      Object.assign(pairs,{[customPath(routes[i], root)]:component});
+   }
+   return SPA({
+      target : document.body,
+      routes : {
+         "/" : ()=>{},
+         ...pairs
+      },
+      wrapper : Section()
+   })   
+}
+function customPath(inputPath, root = './src/pages', extensions = ['js', 'ts']) {
+   if(root.at(-1)==="/") root = root.slice(0, -1);
+   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]);
+   if (rootIndex !== -1) {
+       const subsequentParts = parts.slice(rootIndex + 1);
+       const lastPart = subsequentParts[subsequentParts.length - 1];
+       const isIndexFile = lastPart === 'index.js' || lastPart === 'index.ts';
+       const hasValidExtension = extensions.some(ext => lastPart === `.${ext}` || lastPart.endsWith(`.${ext}`));
+       if (isIndexFile) {
+           return '/' + (subsequentParts.length > 1 ? subsequentParts.slice(0, -1).join('/') : '');
+       }
+       if (hasValidExtension) {
+           return '/' + subsequentParts.join('/').replace(/\.(js|ts)$/, '');
+       }
+   }
+   return '';
+}
+function findCommonPath(paths) {
+   if (paths.length === 0) return '';
+   const splitPaths = paths.map(path => path.split('/'));
+   const minLength = Math.min(...splitPaths.map(parts => parts.length));
+   let commonParts = [];
+   for (let i = 0; i < minLength; i++) {
+       const part = splitPaths[0][i]; 
+       if (splitPaths.every(parts => parts[i] === part || parts[i].startsWith('['))) {
+           commonParts.push(part);
+       } else {
+           break; 
+       }
+   }
+   const commonPath = commonParts.join('/') + (commonParts.length ? '/' : '');
+   return commonPath;
+}
+
+// import * as Params from "./params"
+
 const App={
     ...__App__,
     ...JsonStyleSheet,
     ...Spa,
     ...Global,
-    ...Params
+    // ...Params
 };
 
 [
@@ -13566,6 +13655,7 @@ if ( globalThis.__Ziko__ ) {
             ExtractAll,
             RemoveAll
         };
+        defineParamsGetter(__Ziko__);
 	}
 // globalThis.__Ziko__={
 //     ...Ziko,
@@ -13595,4 +13685,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, Flex$1 as Flex, Footer, Form, Grid$1 as Grid, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Modal, Nav, PI, Permutation, Random, SPA, Section, Signal, Slider, Splitter, Str, Svg, Table$1 as Table, Tabs, Utils$1 as Utils, ZikoApp, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUIBreadcrumbs, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIDefintion, ZikoUIFigure, ZikoUIFlex$1 as ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, 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, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVerticalSlider, ZikoUIVerticalSplitter, ZikoUIVideo, __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, 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, svgPolyLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useBluetooth, useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon, useFocusEvent, useFps, useGeolocation, useHashEvent, useInputEvent, useKeyEvent, useLocaleStorage, useMediaQuery, useMouseEvent, usePointerEvent, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useTheme, useThread, useThrottle, useTimeLoop, useTitle, 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, Permutation, Random, SPA, SVGWrapper, Section, Signal, Slider, Splitter, Str, Svg, Table$1 as Table, Tabs, Utils$1 as Utils, ZikoApp, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUIBreadcrumbs, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIContainerElement, ZikoUIDefintion, ZikoUIElement$1 as 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, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVerticalSlider, ZikoUIVerticalSplitter, ZikoUIVideo, ZikoUIXMLWrapper, __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, 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, svgPolyLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useBluetooth, useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon, useFocusEvent, useFps, useGeolocation, useHashEvent, useInputEvent, useKeyEvent, useLocaleStorage, useMediaQuery, useMouseEvent, usePointerEvent, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useTheme, useThread, useThrottle, useTimeLoop, useTitle, 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.15",
+  "version": "0.0.17",
   "description": "a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities",
   "keywords": [
     "Zikojs",
@@ -25,7 +25,7 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/ziko.mjs",
+      "import": "./src/index.js",
       "require": "./dist/ziko.cjs"
     },
     "./type": {

package/src/app/index.js

@@ -3,18 +3,19 @@ export * from "./json-style-sheet";
 export * from "./spa"
 export * from "./params"
 export * from "./globals"
+export * from "./spa-file-based-routing"
 
 import * as __App__ from "./ziko-app"
 import * as JsonStyleSheet from "./json-style-sheet"
 import * as Spa from "./spa"
 import * as Global from "./globals"
-import * as Params from "./params"
+// import * as Params from "./params"
 
 const App={
     ...__App__,
     ...JsonStyleSheet,
     ...Spa,
     ...Global,
-    ...Params
+    // ...Params
 }
 export default App

package/src/app/params.js

@@ -1,4 +1,4 @@
-function parseParams(queryString) {
+function parseQueryParams(queryString) {
     const params = {};
     queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
         const [key, value] = match.split('=');
@@ -7,19 +7,19 @@ function parseParams(queryString) {
     return params;
 }
 
-function defineParamsGetter(target = globalThis){
+function defineParamsGetter(target ){
     Object.defineProperties(target, {
         'QueryParams': {
             get: function() {
-                return parseParams(location.search.substring(1));
+                return parseQueryParams(globalThis.location.search.substring(1));
             },
             configurable: false,
             enumerable: true 
         },
         'HashParams': {
             get: function() {
-                const hash = window.location.hash.substring(1);
-                return parseParams(hash);
+                const hash = globalThis.location.hash.substring(1);
+                return hash.split("#");
             },
             configurable: false,
             enumerable: true 

package/src/app/spa-file-based-routing.js

@@ -0,0 +1,74 @@
+import { SPA } from "./spa";
+import { Section } from "../ui";
+// import.meta.glob('./src/pages/**/*.js')
+async function FileBasedRouting(pages /* use import.meta.glob */){
+   const routes = Object.keys(pages)
+   const root = findCommonPath(routes)
+   // console.log({root})
+   const pairs = {}
+   for(let i=0; i<routes.length; i++){
+      const module = await pages[routes[i]]()
+      const component = await module.default
+      Object.assign(pairs,{[customPath(routes[i], root)]:component})
+   }
+   return SPA({
+      target : document.body,
+      routes : {
+         "/" : ()=>{},
+         ...pairs
+      },
+      wrapper : Section()
+   })   
+}
+function customPath(inputPath, root = './src/pages', extensions = ['js', 'ts']) {
+   if(root.at(-1)==="/") root = root.slice(0, -1)
+   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]);
+   if (rootIndex !== -1) {
+       const subsequentParts = parts.slice(rootIndex + 1);
+       const lastPart = subsequentParts[subsequentParts.length - 1];
+       const isIndexFile = lastPart === 'index.js' || lastPart === 'index.ts';
+       const hasValidExtension = extensions.some(ext => lastPart === `.${ext}` || lastPart.endsWith(`.${ext}`));
+       if (isIndexFile) {
+           return '/' + (subsequentParts.length > 1 ? subsequentParts.slice(0, -1).join('/') : '');
+       }
+       if (hasValidExtension) {
+           return '/' + subsequentParts.join('/').replace(/\.(js|ts)$/, '');
+       }
+   }
+   return '';
+}
+function findCommonPath(paths) {
+   if (paths.length === 0) return '';
+   const splitPaths = paths.map(path => path.split('/'));
+   const minLength = Math.min(...splitPaths.map(parts => parts.length));
+   let commonParts = [];
+   for (let i = 0; i < minLength; i++) {
+       const part = splitPaths[0][i]; 
+       if (splitPaths.every(parts => parts[i] === part || parts[i].startsWith('['))) {
+           commonParts.push(part);
+       } else {
+           break; 
+       }
+   }
+   const commonPath = commonParts.join('/') + (commonParts.length ? '/' : '');
+   return commonPath;
+}
+
+// // Example usage
+// const inputPaths = [
+//    './src/pages/[blog]/[lang]/index.js',
+//    './src/pages/[blog]/index.js',
+//    './src/pages/about.js',
+//    './src/pages/articles/[data]/[color]/index.js',
+//    './src/pages/articles/a1.js',
+//    './src/pages/index.js',
+//    './src/pages/me.js'
+// ];
+
+// console.log(findCommonPath(inputPaths)); // Output: './src/pages/'
+export{
+    FileBasedRouting,
+}

package/src/app/spa.js

@@ -4,8 +4,6 @@ import { ZikoApp } from "./ziko-app";
 class ZikoSPA extends ZikoApp{
     constructor({head, wrapper, target, routes}){
         super({head, wrapper, target})
-        // this.wrapper=wrapper;
-        console.log(target)
         this.routes=new Map([
             ["404",text("Error 404")],
             ...Object.entries(routes)
@@ -32,6 +30,7 @@ class ZikoSPA extends ZikoApp{
             if(typeof callback === "function") element = callback();  
         }
         if(element?.isZikoUIElement) element.render(this.wrapper);
+        // if(element?.isZikoApp) element.render(this.wrapper);
         if(element instanceof Promise){
             element.then(e=>e.render(this.wrapper))
         }

package/src/app/ziko-app.js

@@ -1,4 +1,4 @@
-import { ZikoHead } from "../reactivity/hooks/Head";
+import { ZikoHead , useHead} from "../reactivity/hooks/Head";
 class ZikoApp {
     constructor({head = null, wrapper = null, target = null}){
         this.head = head;
@@ -13,7 +13,7 @@ class ZikoApp {
         this.head && this.setHead(this.head);
         this.wrapper && this.setWrapper(this.wrapper);
         this.target && this.setTarget(this.target);
-        this.wrapper.render(this.target);
+        if(this.wrapper && this.target)this.wrapper.render(this.target);
     }
     setTarget(target){
         if(target instanceof HTMLElement) this.target = target;

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__} from "./app";
+import App,{__UI__, __Config__, defineParamsGetter} from "./app";
 
 export * from "./math";
 export * from "./ui";
@@ -48,6 +48,7 @@ if ( globalThis.__Ziko__ ) {
             ExtractAll,
             RemoveAll
         };
+        defineParamsGetter(__Ziko__)
 	}
 // globalThis.__Ziko__={
 //     ...Ziko,

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

@@ -85,6 +85,7 @@ class ZikoUIBr extends ZikoUIElement {
   const link=(href,...UIElement)=>new ZikoUILink(href).append(...UIElement);
   const html=(tag,...UIElement)=>new ZikoUIHtmlTag(tag).append(...UIElement);
   const btn = (value) => new ZikoUIBtn(value);
+export * from "./xml-wrapper.js"
 export{
   html,
   btn,

package/src/ui/elements/primitives/misc/xml-wrapper.js

@@ -0,0 +1,37 @@
+import ZikoUIElement from "../ZikoUIElement";
+class ZikoUIXMLWrapper extends ZikoUIElement{
+    constructor(XMLContent, type){
+        super("div", "")
+        this.element.append(type==="svg"?svg2dom(XMLContent):html2dom(XMLContent))
+    }
+}
+function html2dom(htmlString) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
+    return doc.body.firstChild;
+  }
+function svg2dom(svgString) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    return doc.documentElement; // SVG elements are usually at the root
+}
+class ZikoUIHTMLWrapper extends ZikoUIXMLWrapper{
+    constructor(HTMLContent){
+        super(HTMLContent, "html")
+    }
+}
+class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
+    constructor(SVGContent){
+        super(SVGContent, "svg")
+    }
+}
+const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
+const SVGWrapper = (SVGContent) => new ZikoUIHTMLWrapper(SVGContent);
+
+export{
+    ZikoUIXMLWrapper,
+    ZikoUIHTMLWrapper,
+    ZikoUISVGWrapper,
+    HTMLWrapper,
+    SVGWrapper
+}

package/src/ui/index.js

@@ -16,6 +16,13 @@ import * as Semantic from "./elements/primitives/semantic";
 import * as Misc from "./elements/primitives/misc";
 import * as Derived from "./elements/derived";
 
+import ZikoUIElement from "./elements/primitives/ZikoUIElement";
+import ZikoUIContainerElement from "./elements/primitives/ZikoUIContainerElement";
+
+export{
+    ZikoUIContainerElement,
+    ZikoUIElement
+}
 const UI = {
     ...Text,
     ...List,
@@ -24,6 +31,8 @@ const UI = {
     ...Table,
     ...Semantic,
     ...Misc,
-    ...Derived
+    ...Derived,
+    ZikoUIElement,
+    ZikoUIContainerElement
 }
 export default UI;