ziko 0.37.0 → 0.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.37.0",
+  "version": "0.38.1",
   "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,13 @@
     "./app": {},
     "./time": {},
     "./components": {}
-    
   },
+  "sideEffects" : false,
   "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 +86,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/__helpers__/composition-dep/compose-class.js

@@ -0,0 +1,46 @@
+export function composeClass(Class, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+
+  class Composed extends Class {
+    constructor(...args) {
+      super(...args);
+      // ⚠️ Do NOT assign mixin functions to `this`
+    }
+  }
+
+  // Copy prototype properties (methods, getters/setters, non-functions)
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+
+    if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+      Object.defineProperty(Composed.prototype, key, desc);
+    } else if (typeof desc.value === 'function') {
+      // Only add method if it does NOT already exist
+      if (!Composed.prototype.hasOwnProperty(key)) {
+        Object.defineProperty(Composed.prototype, key, desc);
+      }
+    }
+  }
+
+  return Composed;
+}
+
+// // Usage
+// class UIBase {
+//   log() { console.log('UIBase log'); }
+// }
+
+// const mixin = {
+//   at() { return 0; },
+//   hello() { return 'hello'; }
+// };
+
+// const UIComposed = composeClass(UIBase, mixin);
+
+// class UI2 extends UIComposed {
+//   at() { return 1; }  // ✅ correctly overrides mixin
+// }
+
+// const ui = new UI2();
+// console.log(ui.at());    // 1
+// console.log(ui.hello()); // 'hello'

package/src/__helpers__/register/index.js

@@ -0,0 +1,6 @@
+import { register_to_class } from "./register-to-class.js";
+import { register_to_instance } from "./register-to-instance";
+export const register = (target, ...mixins) => {
+  if(typeof target === 'function') register_to_class(target, ...mixins)
+  else register_to_instance(target, ...mixins)
+  }

package/src/__helpers__/register/register-to-class.js

@@ -0,0 +1,16 @@
+export function register_to_class(target, ...mixins){
+    mixins.forEach(n => _register_to_class_(target, n))
+}
+function _register_to_class_(target, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+    if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+      Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+    } else if (typeof desc.value === 'function') {
+      if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
+        Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+      }
+    }
+  }
+}

package/src/__helpers__/register/register-to-instance.js

@@ -0,0 +1,18 @@
+export function register_to_instance(target, ...mixins){
+    mixins.forEach(n => _register_to_instance_(target, n))
+}
+function _register_to_instance_(instance, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+
+    if ('get' in desc || 'set' in desc) {
+      Object.defineProperty(instance, key, desc);
+    } else if (typeof desc.value === 'function') {
+      instance[key] = desc.value.bind(instance);
+    } else {
+      instance[key] = desc.value;
+    }
+  }
+}

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,17 @@
+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';
+export function __init__global__(){
+    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,52 @@
+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];
+}
+
+export const isStateGetter = (arg) => {
+    return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
+}
+