ziko 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "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",
@@ -89,6 +89,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "cross-env": "^7.0.3",
     "eslint": "^8.52.0",
+    "eslint-plugin-spellcheck": "^0.0.20",
     "jasmine": "^5.3.0",
     "rollup": "^4.1.5",
     "rollup-plugin-livereload": "^2.0.5",

package/src/__helpers__/index.js

@@ -1,41 +1,61 @@
-const mixin = (target, ...sources) => {
-    sources.forEach(source => {
-        Object.getOwnPropertyNames(source.prototype).forEach(name => {
-            if (name !== 'constructor') {
-                target[name] = source.prototype[name];
-            }
-        });
-    });
-}
-
-class A {
-    constructor(){
-        this.msg="from A";
-    }
-    a() {
-        console.log(this.msg);
-        return this;
-    }
-}
-
-class B{
-    constructor(){
-        this.msg="from B";
-    }
-    b() {
-        console.log(this.msg);
-        return this;
-    }
-}
-
-class AB {
-    constructor() {
-        this.msg="from AB"
-        mixin(this.__proto__, A, B);
-    }
-}
-
-ab=new AB()
-export{
-    mixin
-}
+const __ExtractAll__ =(obj)=> {
+    const keys = Object.keys(obj);
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        if (!["__ExtractAll__","__RemoveAll__","ExtractAll","RemoveAll"].includes(key)) {
+            globalThis[key] = obj[key];
+        }
+    }
+}
+const __RemoveAll__ =(obj)=> {
+    const keys = Object.keys(obj);
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        if (key !== '__RemoveAll__') {
+            delete globalThis[key];
+        }
+    }
+}
+const mixin = (target, ...sources) => {
+    sources.forEach(source => {
+        Object.getOwnPropertyNames(source.prototype).forEach(name => {
+            if (name !== 'constructor') {
+                target[name] = source.prototype[name];
+            }
+        });
+    });
+}
+
+class A {
+    constructor(){
+        this.msg="from A";
+    }
+    a() {
+        console.log(this.msg);
+        return this;
+    }
+}
+
+class B{
+    constructor(){
+        this.msg="from B";
+    }
+    b() {
+        console.log(this.msg);
+        return this;
+    }
+}
+
+class AB {
+    constructor() {
+        this.msg="from AB"
+        mixin(this.__proto__, A, B);
+    }
+}
+
+// ab=new AB()
+export{
+    mixin,
+    __ExtractAll__,
+    __RemoveAll__
+}

package/src/app/index.js

@@ -1,12 +1,21 @@
-export{
-    App,
-} from "./app.js"
-export { 
-    Themes,
-    LightThemes,
-    DarkThemes
-} from "./themes/index.js";
-export {
-    __Config__
-} from "./globals/index.js"
-export * from "./globals/index.js"
+export * from "./ziko-app";
+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"
+
+const App={
+    ...__App__,
+    ...JsonStyleSheet,
+    ...Spa,
+    ...Global,
+    // ...Params
+}
+export default App

package/src/app/json-style-sheet.js

@@ -0,0 +1,64 @@
+import { json2css } from "../data";
+class ZikoJsonStyleSheet{
+    constructor(JsonStyle={}){
+        this.cache={
+            JsonStyle,
+            isRenderd : false
+        }
+        this.target = globalThis?.document?.head;
+        this.element =  document.createElement("style");
+        this.element.setAttribute("data-generator","zikojs");
+        this.write();
+        this.render()
+    }
+    get CssText(){
+        return json2css(this.cache.JsonStyle);
+    }
+    render(){
+        this.target.append(this.element);
+        this.cache.isRenderd = true;
+        return this;
+    }
+    unrender(){
+        if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
+        this.cache.isRenderd = false;
+        return this;
+    }
+    write(){
+        this.element.textContent = this.CssText;
+        return this;
+    }
+    style(styles, overwrite = false){
+        if(overwrite) this.clear();
+        Object.assign(this.cache.JsonStyle,styles);
+        this.write();
+        return this;
+    }
+    clear(){
+        this.cache.JsonStyle = {}
+        this.write();
+        return this;
+    }
+    // overrideGlobal(style){
+    //     if(this.cache.JsonStyle["*"]){
+    //         Object.assign(this.cache.JsonStyle["*"],style);
+    //     }
+    //     else Object.assign();
+    //     this.write();
+    //     return this;
+    // }
+}
+
+const jsonStyleSheet = JsonStyle =>new ZikoJsonStyleSheet(JsonStyle);
+export {
+    jsonStyleSheet,
+    ZikoJsonStyleSheet
+}
+
+
+//  p().style({color:"red"})
+//  jsonStyleSheet({
+//    p:{
+//     color : "green !important"
+//    }
+//  })

package/src/app/params.js

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

package/src/app/routes.js

@@ -0,0 +1,58 @@
+
+function routesMatcher(mask, route) {
+    const maskSegments = mask.split('/');
+    const routeSegments = route.split('/');
+    if (maskSegments.length !== routeSegments.length) {
+        return false;
+    }
+    for (let i = 0; i < maskSegments.length; i++) {
+        const maskSegment = maskSegments[i];
+        const routeSegment = routeSegments[i];
+        if (maskSegment.startsWith(':')) {
+            continue;
+        } else if (maskSegment !== routeSegment) {
+            return false;
+        }
+    }    
+    return true;
+}
+function dynamicRoutesParser(mask, route) {
+    const maskSegments = mask.split('/');
+    const routeSegments = route.split('/');
+    const params = {};
+    if (maskSegments.length !== routeSegments.length) {
+        return params; 
+    }
+    for (let i = 0; i < maskSegments.length; i++) {
+        const maskSegment = maskSegments[i];
+        const routeSegment = routeSegments[i];
+        if (maskSegment.startsWith(':')) {
+            const paramName = maskSegment.slice(1); 
+            params[paramName] = routeSegment;
+        } else if (maskSegment !== routeSegment) {
+            return {};
+        }
+    }
+    return params;
+}
+
+function isDynamic(path) {
+    const DynamicPattern = /:\w+/;    
+    return DynamicPattern.test(path);
+  }
+
+// // Example usage:
+// const mask = "/:id/id/:lang/lang";
+// const route = "/id/5/lang/fr";
+// console.log(DynamicRouteMatcher(mask, route)); // Should return true
+
+export {
+    routesMatcher,
+    dynamicRoutesParser,
+    isDynamic
+}
+
+// // Example usage:
+// const mask = "app/lang/:lang/id/:id";
+// const route = "app/lang/en/id/7";
+// console.log(dynamicRoutesParser(mask, route)); // Should return { lang: "en", id: "7" }

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

@@ -0,0 +1,55 @@
+import { text } from "../ui";
+import { dynamicRoutesParser,routesMatcher,isDynamic } from "./routes";
+import { ZikoApp } from "./ziko-app";
+class ZikoSPA extends ZikoApp{
+    constructor({head, wrapper, target, routes}){
+        super({head, wrapper, target})
+        this.routes=new Map([
+            ["404",text("Error 404")],
+            ...Object.entries(routes)
+        ]);
+        this.clear();
+        globalThis.onpopstate = this.render(location.pathname);
+    }
+    clear(){
+        [...this.routes].forEach(n=>{
+            !isDynamic(n[0]) && n[1]?.isZikoUIElement && n[1].unrender()
+        })   
+        // this.wrapper.clear();
+        return this;
+    }
+    render(path){
+        const [mask, callback] = [...this.routes].find(route=>routesMatcher(route[0],path));
+        let element ;
+        if(isDynamic(mask)){
+            const params = dynamicRoutesParser(mask, path)
+            element = callback.call(this,params)
+        }
+        else {
+            callback?.isZikoUIElement && callback.render(this.wrapper); 
+            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))
+        }
+        globalThis.history.pushState({}, "", path);
+        return this;
+    }
+}
+const SPA=({head, wrapper, target, routes})=>new ZikoSPA({head, wrapper, target, routes});
+
+export {
+    ZikoSPA,
+    SPA
+}
+
+
+/*
+ // Static 
+  S.get("/url",wrapper)
+// Dynamique 
+ s.get("/url/name/:name/id/:id",(path,name,id)=>handler())
+// regEx
+*/

package/src/app/ziko-app.js

@@ -0,0 +1,39 @@
+import { ZikoHead , useHead} from "../reactivity/hooks/Head";
+class ZikoApp {
+    constructor({head = null, wrapper = null, target = null}){
+        this.head = head;
+        this.wrapper = wrapper;
+        this.target = target;
+        this.init()        
+    }
+    get isZikoApp(){
+        return true;
+    }
+    init(){
+        this.head && this.setHead(this.head);
+        this.wrapper && this.setWrapper(this.wrapper);
+        this.target && this.setTarget(this.target);
+        if(this.wrapper && this.target)this.wrapper.render(this.target);
+    }
+    setTarget(target){
+        if(target instanceof HTMLElement) this.target = target;
+        else if (typeof target === "string") this.target = globalThis?.document?.querySelector(target);
+        return this;
+    }
+    setWrapper(wrapper){
+        if(wrapper?.isZikoUIElement) this.wrapper = wrapper;
+        else if(typeof wrapper === "function") this.wrapper = wrapper();
+        return this;
+    }
+    setHead(head){
+        if(head instanceof ZikoHead) this.head = head;
+        else this.head = useHead(head);
+        return this;  
+    }
+    
+}
+const App = ({head, wrapper, target}) => new ZikoApp({head, wrapper, target})
+export{
+    ZikoApp,
+    App
+}

package/src/data/api/fetchdom.js

@@ -1,14 +1,14 @@
-import { preload } from "./preload"
-
-async function fetchdom(url='https://github.com/zakarialaoui10'){
-  const data=await fetch(url)
-  const html=await data.text()
-  const dom= new DOMParser().parseFromString(html,'text/xml')
-  return dom.documentElement
-}
-function fetchdomSync(url='https://github.com/zakarialaoui10'){
-  const data=preload(url);
-  const dom= new DOMParser().parseFromString(data,'text/xml')
-  return dom.documentElement;
-}
+import { preload } from "./preload"
+
+async function fetchdom(url='https://github.com/zakarialaoui10'){
+  const data=await fetch(url)
+  const html=await data.text()
+  const dom= new DOMParser().parseFromString(html,'text/xml')
+  return dom.documentElement
+}
+function fetchdomSync(url='https://github.com/zakarialaoui10'){
+  const data=preload(url);
+  const dom= new DOMParser().parseFromString(data,'text/xml')
+  return dom.documentElement;
+}
 export {fetchdom,fetchdomSync}

package/src/data/api/index.js

@@ -1,4 +1,4 @@
-export { preload } from "./preload";
-import { fetchdom ,fetchdomSync } from "./fetchdom";
-globalThis.fetchdom=fetchdom
+export { preload } from "./preload";
+import { fetchdom ,fetchdomSync } from "./fetchdom";
+globalThis.fetchdom=fetchdom
 globalThis.fetchdomSync=fetchdomSync

package/src/data/api/preload.js

@@ -1,11 +1,11 @@
-const preload=(url)=>{
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", url, false); 
-    xhr.send();
-    if (xhr.status === 200) {
-      return xhr.responseText;
-    } else {
-      throw new Error(`Failed to fetch data from ${url}. Status: ${xhr.status}`);
-    }
-}
+const preload=(url)=>{
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url, false); 
+    xhr.send();
+    if (xhr.status === 200) {
+      return xhr.responseText;
+    } else {
+      throw new Error(`Failed to fetch data from ${url}. Status: ${xhr.status}`);
+    }
+}
 export {preload}