ziko 0.0.15 → 0.0.16

package/dist/ziko.cjs

@@ -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 15:43:24 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
@@ -3881,7 +3881,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: {
@@ -5798,7 +5798,7 @@ const Hooks={
     useTitle,
     useFavIcon,
     useMeta,
-    useHead: useHead$1,
+    useHead,
     useThrottle,
     useDebounce,
     useLocaleStorage,
@@ -7062,6 +7062,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");
@@ -7150,10 +7179,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,
@@ -13277,7 +13311,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;
@@ -13420,8 +13454,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)
@@ -13448,6 +13480,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));
         }
@@ -13472,7 +13505,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('=');
@@ -13481,19 +13514,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 
@@ -13501,11 +13534,6 @@ function defineParamsGetter(target = globalThis){
     });
 }
 
-var Params = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    defineParamsGetter: defineParamsGetter
-});
-
 const __UI__={};
 const __Config__={
     default:{
@@ -13529,12 +13557,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
 };
 
 [
@@ -13570,6 +13657,7 @@ if ( globalThis.__Ziko__ ) {
             ExtractAll,
             RemoveAll
         };
+        defineParamsGetter(__Ziko__);
 	}
 // globalThis.__Ziko__={
 //     ...Ziko,
@@ -13615,10 +13703,12 @@ exports.Complex = Complex;
 exports.E = E;
 exports.EPSILON = EPSILON;
 exports.Ease = Ease;
+exports.FileBasedRouting = FileBasedRouting;
 exports.Flex = Flex$1;
 exports.Footer = Footer;
 exports.Form = Form;
 exports.Grid = Grid$1;
+exports.HTMLWrapper = HTMLWrapper;
 exports.Header = Header;
 exports.LinearSystem = LinearSystem;
 exports.Logic = Logic$1;
@@ -13630,6 +13720,7 @@ exports.PI = PI;
 exports.Permutation = Permutation;
 exports.Random = Random;
 exports.SPA = SPA;
+exports.SVGWrapper = SVGWrapper;
 exports.Section = Section;
 exports.Signal = Signal;
 exports.Slider = Slider;
@@ -13660,6 +13751,7 @@ exports.ZikoUIFlex = ZikoUIFlex$1;
 exports.ZikoUIFooter = ZikoUIFooter;
 exports.ZikoUIForm = ZikoUIForm;
 exports.ZikoUIGrid = ZikoUIGrid;
+exports.ZikoUIHTMLWrapper = ZikoUIHTMLWrapper;
 exports.ZikoUIHeader = ZikoUIHeader;
 exports.ZikoUIHeading = ZikoUIHeading;
 exports.ZikoUIHorizontalSlider = ZikoUIHorizontalSlider;
@@ -13690,6 +13782,7 @@ exports.ZikoUIModal = ZikoUIModal;
 exports.ZikoUINav = ZikoUINav;
 exports.ZikoUIParagraphe = ZikoUIParagraphe;
 exports.ZikoUIQuote = ZikoUIQuote;
+exports.ZikoUISVGWrapper = ZikoUISVGWrapper;
 exports.ZikoUISection = ZikoUISection;
 exports.ZikoUISelect = ZikoUISelect;
 exports.ZikoUISubText = ZikoUISubText;
@@ -13700,6 +13793,7 @@ exports.ZikoUITextArea = ZikoUITextArea;
 exports.ZikoUIVerticalSlider = ZikoUIVerticalSlider;
 exports.ZikoUIVerticalSplitter = ZikoUIVerticalSplitter;
 exports.ZikoUIVideo = ZikoUIVideo;
+exports.ZikoUIXMLWrapper = ZikoUIXMLWrapper;
 exports.__Config__ = __Config__;
 exports.__UI__ = __UI__;
 exports.abbrText = abbrText;

package/dist/ziko.js

@@ -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 15:43:24 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
@@ -3883,7 +3883,7 @@
         }
     }
 
-    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: {
@@ -5800,7 +5800,7 @@
         useTitle,
         useFavIcon,
         useMeta,
-        useHead: useHead$1,
+        useHead,
         useThrottle,
         useDebounce,
         useLocaleStorage,
@@ -7064,6 +7064,35 @@
     }
     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");
@@ -7152,10 +7181,15 @@
 
     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,
@@ -13279,7 +13313,7 @@
             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;
@@ -13422,8 +13456,6 @@
     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)
@@ -13450,6 +13482,7 @@
                 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));
             }
@@ -13474,7 +13507,7 @@
         ZikoSPA: ZikoSPA
     });
 
-    function parseParams(queryString) {
+    function parseQueryParams(queryString) {
         const params = {};
         queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
             const [key, value] = match.split('=');
@@ -13483,19 +13516,19 @@
         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 
@@ -13503,11 +13536,6 @@
         });
     }
 
-    var Params = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        defineParamsGetter: defineParamsGetter
-    });
-
     const __UI__={};
     const __Config__={
         default:{
@@ -13531,12 +13559,71 @@
         __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
     };
 
     [
@@ -13572,6 +13659,7 @@
                 ExtractAll,
                 RemoveAll
             };
+            defineParamsGetter(__Ziko__);
     	}
     // globalThis.__Ziko__={
     //     ...Ziko,
@@ -13617,10 +13705,12 @@
     exports.E = E;
     exports.EPSILON = EPSILON;
     exports.Ease = Ease;
+    exports.FileBasedRouting = FileBasedRouting;
     exports.Flex = Flex$1;
     exports.Footer = Footer;
     exports.Form = Form;
     exports.Grid = Grid$1;
+    exports.HTMLWrapper = HTMLWrapper;
     exports.Header = Header;
     exports.LinearSystem = LinearSystem;
     exports.Logic = Logic$1;
@@ -13632,6 +13722,7 @@
     exports.Permutation = Permutation;
     exports.Random = Random;
     exports.SPA = SPA;
+    exports.SVGWrapper = SVGWrapper;
     exports.Section = Section;
     exports.Signal = Signal;
     exports.Slider = Slider;
@@ -13662,6 +13753,7 @@
     exports.ZikoUIFooter = ZikoUIFooter;
     exports.ZikoUIForm = ZikoUIForm;
     exports.ZikoUIGrid = ZikoUIGrid;
+    exports.ZikoUIHTMLWrapper = ZikoUIHTMLWrapper;
     exports.ZikoUIHeader = ZikoUIHeader;
     exports.ZikoUIHeading = ZikoUIHeading;
     exports.ZikoUIHorizontalSlider = ZikoUIHorizontalSlider;
@@ -13692,6 +13784,7 @@
     exports.ZikoUINav = ZikoUINav;
     exports.ZikoUIParagraphe = ZikoUIParagraphe;
     exports.ZikoUIQuote = ZikoUIQuote;
+    exports.ZikoUISVGWrapper = ZikoUISVGWrapper;
     exports.ZikoUISection = ZikoUISection;
     exports.ZikoUISelect = ZikoUISelect;
     exports.ZikoUISubText = ZikoUISubText;
@@ -13702,6 +13795,7 @@
     exports.ZikoUIVerticalSlider = ZikoUIVerticalSlider;
     exports.ZikoUIVerticalSplitter = ZikoUIVerticalSplitter;
     exports.ZikoUIVideo = ZikoUIVideo;
+    exports.ZikoUIXMLWrapper = ZikoUIXMLWrapper;
     exports.__Config__ = __Config__;
     exports.__UI__ = __UI__;
     exports.abbrText = abbrText;