ziko 0.37.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",
@@ -24,16 +24,16 @@
     "LICENCE"
   ],
   "exports": {
-    "./*" : "./src/*",
+    "./*": "./src/*",
     ".": {
       "import": "./dist/ziko.mjs",
       "require": "./dist/ziko.cjs"
     },
     "./math": {
-      "import" : "./src/math/index.js"
+      "import": "./src/math/index.js"
     },
     "./helpers": {
-      "import" : "./src/__helpers__.js"
+      "import": "./src/__helpers__.js"
     },
     "./events": {
       "import": "./src/events/index.js"
@@ -44,11 +44,14 @@
     "./use": {
       "import": "./src/use/index.js"
     },
-    "./ui":{
+    "./hooks": {
+      "import": "./src/hooks/index.js"
+    },
+    "./ui": {
       "import": "./src/ui/index.js",
       "type": "./src/ui/index.d.ts"
     },
-    "./tags":{
+    "./tags": {
       "import": "./src/tags/index.js"
     },
     "./src": "./src/index.js",
@@ -56,13 +59,12 @@
     "./app": {},
     "./time": {},
     "./components": {}
-    
   },
   "bin": {
     "create-ziko-app": "starter/bin/index.js"
   },
   "scripts": {
-    "test": "npx jasmine --config=jasmine.json",
+    "test": "npx vitest",
     "test-link": "node _link/index.js",
     "lint": "eslint src/*/*/*",
     "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js",
@@ -83,13 +85,13 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.1",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-spellcheck": "^0.0.20",
-    "jasmine": "^5.3.0",
+    "jsdom": "^26.1.0",
     "rollup": "^4.1.5",
     "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-serve": "^1.1.1"
+    "rollup-plugin-serve": "^1.1.1",
+    "vitest": "^3.2.4"
   }
-}
+}

package/readme.md

@@ -21,22 +21,96 @@ Composition
 - 🚫 Zero Dependency
 - 🌳 Partial Tree Shaking
 - 🔢 Rich Math Functions and Utilities
+  - <details>
+    <summary>Flexible Math Functions</summary>
+    ZikoJS offers flexible math utilities, such as the `mapfun` function, which allows mapping standard mathematical operations to complex and nested data structures. 
+    For example, the `cos` function in ZikoJS is built on top of mapfun, enabling it to handle multiple arguments with diverse types (numbers, arrays, objects).
+
+    ```js
+    import { cos, PI } from "ziko";
+    const result = cos(PI, PI / 2, PI / 4, [PI / 6, PI / 3], {
+      x: PI / 2,
+      y: PI / 4,
+      z: [0, PI / 12],
+    }
+    );
+    /*
+    result =>
+    [
+      -1,
+      0,
+      0.707106781186548,
+      [0.866025403784439, 0.5],
+      {
+        x: 0,
+        y: 0.707106781186548,
+        z: [1, 0.965925826289068],
+      },
+    ];
+    */
+    // console.log(result)
+
+    ```
+    You can also built your own flexible Math function using this mapfun util : 
+    ```js
+    import { mapfun } from "ziko";
+    const parabolic_func = (a, b, c, x) => a * x ** 2 + b * x + c;
+    const map_parabolic_func =
+      (a, b, c) =>
+      (...X) =>
+        mapfun((n) => parabolic_func(a, b, c, n), ...X);
+    const a = -1.5,
+      b = 2,
+      c = 3;
+    const X = [0, 1, 2, 3];
+    console.log(parabolic_func(a, b, c)(X));
+    // [3,3,1,3]
+
+    ```
+    </details>
+
+
+
 <!-- - The Math Module supports a new Paradigm  -->
 - ✨ Hyperscript-Based Declarative UI (No Template Engines needed)
+```js
+import {p, text, Random} from 'ziko'
+const Hello = name => p(
+  text("Hello ", name)
+).onClick(e => e.target.style({color : Random.color()}))
+```
+- 🔄 Built in State Mangement : 
+```js
+import { tags } from 'ziko/ui'
+import {useState, useDerived} from 'ziko/hooks'
+const [timer, setTimer] = useState(0);
+const converToHMS = seconds => `${Math.floor(seconds / 3600)} : ${Math.floor((seconds % 3600) / 60)} : ${seconds % 60} `
+const [time] = useDerived(t => converToHMS(t) , [timer] ) 
+tags.p('Elapsed Time : ', time)
+let i = 1;
+setInterval(()=>{
+  setTimer(i);
+  i++
+}, 1000)
+```
 - 📱 Single Page Application With File Based Routing
+```js
+import { FileBasedRouting } from "ziko";
+FileBasedRouting(import.meta.glob("./src/pages/**/*.js"))
+```
 - 🤝 One Way Interleaving With [Vanjs]()
 - ⏰ Time loop and animations support
 
 ### 🚀 External : 
-- 🧩 Extra UI Components : [Zextra]()
-- 🖥️ Server Side Rendering With File Based Routing and Client Side Hydration : [ziko-server]()
-- 📝 Mdx-Like Markdown Preprocessor : [Mdz]()
-- 🔌 Flexible Integration with Popular Frameworks/Libraries : [Ziko-wrapper]()
+- 🧩 Extra UI Components : [Zextra](https://github.com/zakarialaoui10/zextra)
+- 🖥️ Server Side Rendering With File Based Routing and Client Side Hydration : [ziko-server](https://github.com/zakarialaoui10/ziko-server)
+- 📝 Mdx-Like Markdown Preprocessor : [Mdz](https://github.com/zakarialaoui10/mdz)
+- 🔌 Flexible Integration with Popular Frameworks/Libraries : [Ziko-wrapper](https://github.com/zakarialaoui10/ziko-wrapper)
   - 🔄 Bi-directional : `React`, `Preact`, `Solid`, `Svelte`, `Vue` , `Vanjs`
   - ➡️ Uni-directional (ZikoJS → X) : 
     - `Astro` : (SSR + Client Hydration)
 - 📦 Growing Add-On Ecosystem : 
-    - Ziko-Gl : WebGL/3D Graphics, Built on Top of [Threejs]()
+    - Ziko-Gl : WebGL/3D Graphics, Built on Top of [Threejs](https://github.com/zakarialaoui10/ziko-gl)
     - Ziko-Chart 
     - Ziko-Code
     - Ziko-Lottie

package/src/__ziko__/__cache__.js

@@ -0,0 +1,6 @@
+export const __CACHE__ = {
+    ui_index : 0,
+    get_ui_index:function(){
+        return this.ui_index ++
+    }
+}

package/src/__ziko__/__config__.js

@@ -0,0 +1,19 @@
+export 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")
+    },
+    renderingMode :"spa",
+    isSSC : false,
+}

package/src/__ziko__/__hydration__.js

@@ -0,0 +1,8 @@
+export const __HYDRATION__ = {
+    map : new Map(),
+    index : 0,
+    increment : function(){
+        return this.index ++
+    }
+}
+export const __HYDRATION_MAP__ = new Map()

package/src/__ziko__/__ui__.js

@@ -0,0 +1,22 @@
+export const __UI__={
+    __all__(){
+        return Object.values(this)
+          .filter(Array.isArray)
+          .flat();
+    },
+    querySelectorAll(){
+        return this.__all__().filter(n=>n)
+    },
+    getElementByIndex(index){
+        return this.__all__().find(n=>n.ui_index===index);
+    },
+    getElementById(id){
+        return null;
+    },
+    getElementsByClass(){
+
+    },
+    getElementsByTagName(){
+        
+    }
+}

package/src/__ziko__/index.js

@@ -0,0 +1,16 @@
+import { defineParamsGetter } from './params.js';
+import { __UI__ } from './__ui__.js';
+import { __Config__ } from './__config__.js';
+import { __HYDRATION__, __HYDRATION_MAP__ } from './__hydration__.js';
+import { __CACHE__ } from './__cache__.js';
+
+if ( !globalThis?.__Ziko__ ){
+    globalThis.__Ziko__ = {
+                __UI__,
+                __HYDRATION__,
+                __HYDRATION_MAP__,
+                __Config__,
+                __CACHE__,
+            };
+    defineParamsGetter(__Ziko__)
+}

package/src/__ziko__/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/globals.js

@@ -1,3 +1,4 @@
+import { defineParamsGetter } from './params.js'
 const __UI__={
     __all__(){
         return Object.values(this)
@@ -53,6 +54,19 @@ const __CACHE__ = {
         return this.ui_index ++
     }
 }
+if ( !globalThis?.__Ziko__ ){
+    globalThis.__Ziko__ = {
+                // ...Ziko,
+                __UI__,
+                __HYDRATION__,
+                __HYDRATION_MAP__,
+                __Config__,
+                __CACHE__,
+                // ExtractAll,
+                // RemoveAll
+            };
+    defineParamsGetter(__Ziko__)
+}
 export {
     __UI__,
     __HYDRATION_MAP__,

package/src/app/index.js

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

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

@@ -1,5 +1,5 @@
 import { SPA } from "./spa.js";
-import { Section } from "../ui/index.js";
+import { tags } from "../ui/index.js";
 // import.meta.glob('./src/pages/**/*.js')
 async function FileBasedRouting(pages /* use import.meta.glob */){
    const routes = Object.keys(pages)
@@ -16,7 +16,7 @@ async function FileBasedRouting(pages /* use import.meta.glob */){
          "/" : ()=>{},
          ...pairs
       },
-      wrapper : Section()
+      wrapper : tags.section()
    })   
 }
 function customPath(inputPath, root = './src/pages', extensions = ['js', 'ts']) {

package/src/app/ziko-app.js

@@ -1,4 +1,4 @@
-import { ZikoHead , useHead} from "../reactivity/hooks/Head/index.js";
+import { ZikoHead , useHead} from "../reactivity/hooks/head/index.js";
 class ZikoApp {
     constructor({head = null, wrapper = null, target = null}){
         this.head = head;

package/src/data/converter/svg.js

@@ -1,8 +1,8 @@
-import { image } from "../../ui"
+import { tags } from "../../ui"
 const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
 const svg2ascii=svg=>btoa(svg2str(svg));
 const svg2imgUrl=svg=>'data:image/svg+xml;base64,'+svg2ascii(svg);
-const svg2img=(svg,render=true)=>image(svg2imgUrl(svg)).render(render);
+const svg2img=(svg,render=true)=>tags.img(svg2imgUrl(svg)).render(render);
 export{
     svg2str,
     svg2ascii,

package/src/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './use-state.js';
+export * from './use-derived.js';
+export * from './use-reactive.js';

package/src/hooks/use-derived.js

@@ -0,0 +1,61 @@
+export function useDerived(deriveFn, sources) {
+    let value = deriveFn(...sources.map(s => s().value));
+    const subscribers = new Set();
+    let paused = false;
+
+    function getValue() {
+        return {
+            value,
+            isStateGetter: () => true,
+            _subscribe: (fn, UIElement) => {
+                subscribers.add(fn);
+
+                const observer = new MutationObserver(() => {
+                    if (!document.body.contains(UIElement.element)) {
+                        subscribers.delete(fn);
+                        observer.disconnect();
+                    }
+                });
+
+                observer.observe(document.body, { childList: true, subtree: true });
+            },
+        };
+    }
+
+    function setValue(newValue) {
+        if (paused) return;
+        if (typeof newValue === "function") newValue = newValue(value);
+        if (newValue !== value) {
+            value = newValue;
+            subscribers.forEach(fn => fn(value));
+        }
+    }
+
+    const controller = {
+        pause: () => { paused = true; },
+        resume: () => { paused = false; },
+        clear: () => { subscribers.clear(); },
+        force: (newValue) => {
+            if (typeof newValue === "function") newValue = newValue(value);
+            value = newValue;
+            subscribers.forEach(fn => fn(value));
+        },
+        getSubscribers: () => new Set(subscribers),
+    };
+
+    // Subscribe to source states
+    sources.forEach(source => {
+        const srcValue = source(); // getValue()
+        srcValue._subscribe(() => {
+            if (!paused) {
+                const newVal = deriveFn(...sources.map(s => s().value));
+                if (newVal !== value) {
+                    value = newVal;
+                    subscribers.forEach(fn => fn(value));
+                }
+            }
+        }, { element: document.body }); // dummy UIElement
+    });
+
+    return [getValue, setValue, controller];
+}

package/src/hooks/use-reactive.js

@@ -0,0 +1,7 @@
+import {mapfun} from '../math'
+import { useState } from './use-state.js'
+
+const useReactive = (nested_value) => mapfun(n => useState(n), nested_value)
+export{
+    useReactive
+}

package/src/hooks/use-state.js

@@ -0,0 +1,47 @@
+export function useState(initialValue) {
+    let value = initialValue;
+    const subscribers = new Set();
+    let paused = false;
+
+    function getValue() {
+        return {
+            value,
+            isStateGetter: () => true,
+            _subscribe: (fn, UIElement) => {
+                subscribers.add(fn);
+
+                const observer = new MutationObserver(() => {
+                    if (!document.body.contains(UIElement.element)) {
+                        subscribers.delete(fn);
+                        observer.disconnect();
+                    }
+                });
+
+                observer.observe(document.body, { childList: true, subtree: true });
+            },
+        };
+    }
+
+    function setValue(newValue) {
+        if (paused) return;
+        if (typeof newValue === "function") newValue = newValue(value);
+        if (newValue !== value) {
+            value = newValue;
+            subscribers.forEach(fn => fn(value));
+        }
+    }
+
+    const controller = {
+        pause: () => { paused = true; },
+        resume: () => { paused = false; },
+        clear: () => { subscribers.clear(); },
+        force: (newValue) => { // force update even if paused
+            if (typeof newValue === "function") newValue = newValue(value);
+            value = newValue;
+            subscribers.forEach(fn => fn(value));
+        },
+        getSubscribers: () => new Set(subscribers),
+    };
+
+    return [getValue, setValue, controller];
+}

package/src/index.js

@@ -1,94 +1,17 @@
-import { __ExtractAll__,__RemoveAll__ } from "./__helpers__/index.js";
-import Math from "./math/index.js";
-import UI from "./ui/index.js";
-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 * as Events from "./events/index.js"
-// import * as Use from "./use/index.js"
-
-import App,{__UI__,__HYDRATION_MAP__, __Config__, __CACHE__, defineParamsGetter, __HYDRATION__} from "./app";
-
 export * from "./math/index.js";
 export * from "./ui/index.js";
 export * from "./time/index.js";
 export * from "./data/index.js";
 export * from "./reactivity/index.js"
-export * from "./graphics/index.js";
 export * from "./app/index.js";
 
 export * from "./events/index.js";
 export * from "./use/index.js";
 
-[
-    App,
-    Math,
-    UI,
-    Time,
-    Data,
-    Reactivity,
-    Graphics,
-].forEach(n=>Object.assign(n,{
-    ExtractAll:()=>__ExtractAll__(n),
-    RemoveAll:()=>__RemoveAll__(n)
-}))
-
-const Ziko={
-    App,
-    Math,
-    UI,
-    Time,
-    Data,
-    Reactivity,
-    Graphics
-}
-
-if ( globalThis.__Ziko__ ) {
-    console.warn( 'WARNING: Multiple instances of Ziko.js being imported.' );
-	} else {
-		globalThis.__Ziko__={
-            ...Ziko,
-            __UI__,
-            __HYDRATION__,
-            __HYDRATION_MAP__,
-            __Config__,
-            __CACHE__,
-            ExtractAll,
-            RemoveAll
-        };
-        defineParamsGetter(__Ziko__)
-	}
-// globalThis.__Ziko__={
-//     ...Ziko,
-//     __UI__,
-//     __Config__,
-//     ExtractAll,
-//     RemoveAll
-// };
 if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
-function ExtractAll(){
-    UI.ExtractAll();
-    Math.ExtractAll();
-    Time.ExtractAll();
-    Reactivity.ExtractAll();
-    Graphics.ExtractAll();
-    Data.ExtractAll()
-    return this;
-}
-function RemoveAll(){
-    UI.RemoveAll();
-    Math.RemoveAll();
-    Time.RemoveAll();
-    Reactivity.RemoveAll();
-    Graphics.RemoveAll();
-    Data.RemoveAll()
-}
-
-export default Ziko;
 
+import './math/functions/proxy.js'
 
 

package/src/math/complex/index.js

@@ -53,6 +53,9 @@ class Complex extends ZikoMath{
             this.b = +b.toFixed(32);
         }
     }
+    isComplex(){
+        return true
+    }
     toString(){
         let str = "";
         if (this.a !== 0)

package/src/math/functions/index.js

@@ -58,29 +58,29 @@ const sqrtn=(x,n)=>{
         }
     }
 }
-const e=(...x)=>mapfun(Math.exp,...x);
-const ln=(...x)=>mapfun(Math.log,...x);
-const cos=(...x)=>mapfun(Fixed.cos,...x);
-const sin=(...x)=>mapfun(Fixed.sin,...x);
-const tan=(...x)=>mapfun(Fixed.tan,...x);
-const sec=(...x)=>mapfun(Fixed.sec,...x);
-const sinc=(...x)=>mapfun(Fixed.sinc,...x)
-const csc=(...x)=>mapfun(Fixed.csc,...x);
-const cot=(...x)=>mapfun(Fixed.cot,...x);
-const acos=(...x)=>mapfun(Fixed.acos,...x);
-const asin=(...x)=>mapfun(Fixed.asin,...x);
-const atan=(...x)=>mapfun(Fixed.atan,...x);
-const acot=(...x)=>mapfun(Fixed.acot,...x);
-const cosh=(...x)=>mapfun(Fixed.cosh,...x);
-const sinh=(...x)=>mapfun(Fixed.sinh,...x);
-const tanh=(...x)=>mapfun(Fixed.tanh,...x);
-const coth=(...x)=>mapfun(Fixed.coth,...x);
-const acosh=(...x)=>mapfun(Fixed.acosh,...x);
-const asinh=(...x)=>mapfun(Fixed.asinh,...x);
-const atanh=(...x)=>mapfun(Fixed.atanh,...x);
-const ceil=(...x)=>mapfun(Math.ceil,...x);
-const floor=(...x)=>mapfun(Math.floor,...x);
-const round=(...x)=>mapfun(Math.round,...x);
+const e=(...x) => mapfun(Math.exp,...x);
+const ln=(...x) => mapfun(Math.log,...x);
+const cos=(...x) => mapfun(Fixed.cos,...x);
+const sin=(...x) => mapfun(Fixed.sin,...x);
+const tan=(...x) => mapfun(Fixed.tan,...x);
+const sec=(...x) => mapfun(Fixed.sec,...x);
+const sinc=(...x) => mapfun(Fixed.sinc,...x)
+const csc=(...x) => mapfun(Fixed.csc,...x);
+const cot=(...x) => mapfun(Fixed.cot,...x);
+const acos=(...x) => mapfun(Fixed.acos,...x);
+const asin=(...x) => mapfun(Fixed.asin,...x);
+const atan=(...x) => mapfun(Fixed.atan,...x);
+const acot=(...x) => mapfun(Fixed.acot,...x);
+const cosh=(...x) => mapfun(Fixed.cosh,...x);
+const sinh=(...x) => mapfun(Fixed.sinh,...x);
+const tanh=(...x) => mapfun(Fixed.tanh,...x);
+const coth=(...x) => mapfun(Fixed.coth,...x);
+const acosh=(...x) => mapfun(Fixed.acosh,...x);
+const asinh=(...x) => mapfun(Fixed.asinh,...x);
+const atanh=(...x) => mapfun(Fixed.atanh,...x);
+const ceil=(...x) => mapfun(Math.ceil,...x);
+const floor=(...x) => mapfun(Math.floor,...x);
+const round=(...x) => mapfun(Math.round,...x);
 const atan2=(x,y,rad=true)=>{
     if(typeof x === "number"){
         if(typeof y === "number")return rad?Math.atan2(x,y):Math.atan2(x,y)*180/Math.PI;