ziko 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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",
@@ -19,8 +19,7 @@
   "module": "dist/ziko.mjs",
   "unpkg": "dist/ziko.min.js",
   "files": [
-    "core",
-    "wrapper",
+    "src",
     "dist",
     "LICENCE"
   ],
@@ -29,22 +28,50 @@
       "import": "./dist/ziko.mjs",
       "require": "./dist/ziko.cjs"
     },
-    "./A": {
-      "import": "./src/A/index.js"
+    "./type": {
+      "import": "./src/type.js"
     },
-    "./react": {
-      "import": "./wrapper/react/index.jsx"
+    "./math": {
+      "import": "./src/math/index.js"
+    },
+    "./math/functions": {
+      "import": "./src/math/functions/index.js"
+    },
+    "./math/matrix": {
+      "import": "./src/math/matrix/index.js"
+    },
+    "./math/complex": {
+      "import": "./src/math/complex/index.js"
+    },
+    "./math/signal": {
+      "import": "./src/math/signal/index.js"
+    },
+    "./ui": {
+      "import": "./src/ui/index.js"
+    },
+    "./time": {
+      "import": "./src/time/index.js"
+    },
+    "./reactivity": {
+      "import": "./src/reactivity/index.js"
+    },
+    "./data": {
+      "import": "./src/data/index.js"
+    },
+    "./graphics": {
+      "import": "./src/data/graphics.js"
     }
   },
   "bin": {
     "create-ziko-app": "starter/bin/index.js"
   },
   "scripts": {
-    "test": "node --watch test/index.js",
+    "test": "npx jasmine --config=jasmine.json",
     "test-link": "node _link/index.js",
     "lint": "eslint src/*/*/*",
-    "dev": "rollup -c rollup.config.js -w",
-    "build": "rollup -c rollup.config.js"
+    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js",
+    "watch": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
   },
   "repository": {
     "type": "git",
@@ -57,12 +84,12 @@
   },
   "homepage": "https://github.com/zakarialaoui10/ziko.js#readme",
   "devDependencies": {
-    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "dir2tree": "^0.3.2",
+    "cross-env": "^7.0.3",
     "eslint": "^8.52.0",
+    "jasmine": "^5.3.0",
     "rollup": "^4.1.5",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-serve": "^1.1.1"

package/src/__helpers__/index.js

@@ -0,0 +1,41 @@
+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
+}

package/src/app/app.js

@@ -0,0 +1,46 @@
+import { ZikoUIFlex } from "../user-interface/elements/derived/Flex.js";
+import { Seo } from "./seo/index.js";
+import { useHashEvent } from "../reactivity/index.js";
+class ZikoUIApp extends ZikoUIFlex{
+    constructor(){
+        super("main");
+        this.root=document.documentElement;
+        this.head=null;
+        this.#init();
+        this.seo=Seo(this);
+        Object.assign(this.events,{
+            hash:null
+        })
+        Object.assign(this.cache,{
+            theme:null,
+            isRoot:true
+        });
+        // globalThis.__Ziko__.__Config__.default.render && this.render();
+    }
+    #init(){
+        this.root.setAttribute("data-engine","zikojs");
+        const head=this.root.getElementsByTagName("head")[0];
+        this.head=head?head:this.head=document?.createElementtt("head");
+        if(!head)this.root.insertBefore(this.head,document?.body);
+        const title=this.head.getElementsByTagName("title")[0];
+        this.Title=title?title:document?.createElementt("title");
+        if(!title)this.head.append(this.Title);
+    }
+    title(title=this.title.textContent){
+        this.Title.textContent=title;
+        return this;
+    }
+    prefetch(){
+
+    }
+    description(){
+
+    }
+    onHashChange(...callbacks){
+        if(!this.events.hash)this.events.hash = useHashEvent(this);
+        this.events.hash.onChange(...callbacks);
+        return this;
+      }
+}
+const App=(...UIElement)=>new ZikoUIApp().append(...UIElement)
+export {App};

package/src/app/component/index.js

@@ -0,0 +1,38 @@
+// if(globalThis?.document){
+//     class ZikoUIComponent extends HTMLElement{
+//     constructor(){
+//         super();
+//         this.shadowDOM = this.attachShadow({ mode: 'open' });
+//         this.wrapper=document?.createElementt("div");
+//     }
+//     connectedCallback() {
+//         this.setAttribute('role', 'region');
+//         this.setAttribute('data-engine',"zikojs");
+//         this.shadowDOM.append(this.wrapper);
+//         this.observeContentChanges();
+//     }
+//     observeContentChanges() {
+//         const observer = new MutationObserver((mutations) => {
+//             mutations.forEach((mutation) => {
+//                 if (mutation.type === 'childList' || mutation.type === 'characterData') {
+//                     this.wrapper.innerHTML="";
+//                     __Ziko__.__Config__.setDefault({ target: this.wrapper });
+//                     globalThis.eval(this.innerHTML);
+//                 }
+//             });
+//         });
+//         observer.observe(this, { childList: true, subtree: true, characterData: true });
+//     }
+
+//     disconnectedCallback() {
+//         console.log('ZikoUIComponent removed from page.');
+//     }
+// }
+//     globalThis.customElements.define('ziko-ui', ZikoUIComponent);
+// }
+// else {
+//     var ZikoUIComponent = null;
+// }
+// export{
+//     ZikoUIComponent
+// }

package/src/app/globals/index.js

@@ -0,0 +1,20 @@
+const __UI__={}
+const __Config__={
+    default:{
+        target:null,
+        render:true,
+        math:{
+            mode:"deg"
+        }
+    },
+    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];
+    },
+    init:()=>document.documentElement.setAttribute("data-engine","zikojs")
+}
+export {
+    __UI__,
+    __Config__
+}

package/src/app/index.js

@@ -0,0 +1,12 @@
+export{
+    App,
+} from "./app.js"
+export { 
+    Themes,
+    LightThemes,
+    DarkThemes
+} from "./themes/index.js";
+export {
+    __Config__
+} from "./globals/index.js"
+export * from "./globals/index.js"

package/src/app/params/index.js

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

package/src/app/router/index.js

@@ -0,0 +1,67 @@
+import { text } from "../../user-interface/elements/primitives/text/index.js";
+class ZikoSPA{
+    constructor(root_UI,routes){
+        this.root_UI=root_UI;
+        this.routes=new Map([
+            [404,text("Error 404")],
+            ...Object.entries(routes)
+        ]);
+        this.patterns=new Map();
+        this.maintain();
+        window.onpopstate = this.render(location.pathname);
+
+    }
+    // get(path,wrapper){
+    //     (path instanceof RegExp)
+    //     ? this.patterns.set(path,wrapper)
+    //     : this.routes.set(path,wrapper);
+    //     this.maintain();
+    //     return this;
+    // }
+    get(path, wrapper) {
+        if (typeof path === 'string' && path.includes(':')) {
+            const params = [];
+            const regex = new RegExp(`^${path.replace(/:([^/]+)/g, (match, paramName) => {
+                params.push(paramName);
+                return '(.+)';
+            })}$`);
+            this.patterns.set(regex, (path) => {
+                const values = regex.exec(path).slice(1);
+                wrapper(...values);
+            });
+        } else {
+            (path instanceof RegExp)
+            ? this.patterns.set(path, wrapper)
+                : this.routes.set(path, wrapper);
+        }
+        this.maintain();
+        return this;
+    }
+    maintain(){
+        this.root_UI.append(...this.routes.values());
+        [...this.routes.values()].map(n=>n.render(false));
+        this.render(location.pathname)
+        return this;
+    }
+    render(path){
+        if(this.routes.get(path))this.routes.get(path).render(true);
+        else{   
+            const key=[...this.patterns.keys()].find(pattern=>pattern.test(path))
+            if(key)this.patterns.get(key)(path);
+            else this.routes.get(404).render(true)
+        }
+        window.history.pushState({}, "", path);
+        return this;
+    }
+}
+const SPA=(root_UI,routes,patterns)=>new ZikoSPA(root_UI,routes,patterns);
+
+export {SPA}
+
+/*
+ // Static 
+  S.get("/url",wrapper)
+// Dynamique 
+ s.get("/url/name/:name/id/:id",(path,name,id)=>handler())
+// regEx
+*/

package/src/app/seo/index.js

@@ -0,0 +1,43 @@
+class ZikoSeo{
+    constructor(app){
+        this.app=app;
+        this.meta={};
+        this.#setMeta("generator","zikojs")
+    }
+    #setMeta(key,value){
+        const meta=document.querySelector(`meta[name=${key}]`);
+        this.meta=meta?meta:document?.createElement("meta");
+        this.meta.setAttribute("name",key);
+        this.meta.setAttribute("content",value);
+        if(!meta)this.app.head.append(this.meta);
+        return this;     
+    }
+    charset(charset="utf-8"){
+        const meta=document.querySelector("meta[charset]");
+        this.meta=meta?meta:document?.createElementt("meta");
+        this.meta.setAttribute("charset",charset);
+        if(!meta)this.app.head.append(this.meta);
+        return this;
+    }
+    description(description){
+        this.#setMeta("description",description);
+        return this;    
+    }
+    viewport(viewport="width=device-width, initial-scale=1.0"){
+        this.#setMeta("viewport",viewport);
+        return this;    
+    }
+    keywords(...keywords){
+        keywords.push("zikojs");
+        keywords=[...new Set(keywords)].join(", ");
+        this.#setMeta("keywords",keywords);
+        return this;
+    }
+    author(name="",email=""){
+        const author=[name,email].join(", ");
+        this.#setMeta("author",author);
+        return this;
+    }
+}
+const Seo=(app)=>new ZikoSeo(app);
+export{Seo}