ziko 0.38.1 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.38.1",
+  "version": "0.40.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",

package/src/data/index.js

@@ -1,12 +1,12 @@
 export * from "./api"
 export * from "./converter"
 export * from "./parser"
-export * from "./string"
+export * from "./string-dep"
 
 import * as Api from "./api"
 import * as Converter from "./converter"
 import * as Parser from "./parser"
-import * as String from "./string"
+import * as String from "./string-dep"
 
 const Data = {
     ...Api,

package/src/data/string/checkers.js

@@ -0,0 +1,27 @@
+export const is_camelcase = (text = '') =>{
+    if (text.length === 0) return false; 
+    const camelCasePattern = /^[a-z][a-zA-Z0-9]*$/;
+    return camelCasePattern.test(text);
+}
+export const is_hyphencase = (text = '') => text.split('-').length > 0;
+export const is_snakeCase = (text = '') => text.split('_').length > 0;
+export const is_pascalcalse = (text = '') => {
+    if (text.length === 0) return false;
+    const PascalCasePattern = /^[A-Z][a-zA-Z0-9]*$/;
+    return PascalCasePattern.test(text);
+}
+
+export const is_palindrome = text =>{
+    const str = text.toLocaleLowerCase();
+    let l = str.length,i;
+    for(i=0;i<l/2;i++)if(str[i]!=str[l-i-1])return false;
+    return true;
+}
+
+export const is_anagram = (word, words) =>{
+        word=word.split("").sort();
+        words=words.split("").sort();
+        return JSON.stringify(word)===JSON.stringify(words);    
+}
+
+export const is_isogram = (text = '') => [...new Set(text.toLowerCase())].length === text.length;

package/src/data/string/converters.js

@@ -0,0 +1,24 @@
+export const camel2hyphencase = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
+export const camel2snakecase = (text = '') => text.replace(/[A-Z]/g, match => '_' + match.toLowerCase());
+export const camel2pascalcase = (text = '') => text.charAt(0).toUpperCase() + text.slice(1);
+export const camel2constantcase = (text = '') => text.replace(/[A-Z]/g, match => '_' + match).toUpperCase();
+
+export const pascal2snakecase = (text = '') => text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match.toLowerCase() : match.toLowerCase());
+export const pascal2hyphencase = (text = '') => text.replace(/([A-Z])/g, (match, offset) => offset ? '-' + match.toLowerCase() : match.toLowerCase());
+export const pascal2camelcase = (text = '') => text.charAt(0).toLowerCase() + text.slice(1);
+export const pascal2constantcase = (text = '') => text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match : match).toUpperCase();
+
+export const snake2camelcase = (text = '') => text.replace(/(_\w)/g, match => match[1].toUpperCase());
+export const snake2hyphencase = (text = '') => text.replace(/_/g, "-");
+export const snake2pascalcase = (text = '') => text.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+export const snake2constantcase = (text = '') => text.toUpperCase();
+
+export const hyphen2camelcase = (text = '') => text.replace(/-([a-z])/g, match => match[1].toUpperCase());
+export const hyphen2snakecase = (text = '') => text.replace(/-/g, '_');
+export const hyphen2pascalcase = (text = '') => text.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+export const hyphen2constantcase = (text = '') => text.replace(/-/g, '_').toUpperCase();
+
+export const constant2camelcase = (text = '') => text.toLowerCase().replace(/_([a-z])/g, match => match[1].toUpperCase());
+export const constant2snakecase = (text = '') => text.toLowerCase();
+export const constant2pascalcase = (text = '') => text.toLowerCase().split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+export const constant2hyphencase = (text = '') => text.toLowerCase().replace(/_/g, '-');

package/src/data/string/index.js

@@ -1 +1,2 @@
-export * from "./string.js";
+export * from './converters.js';
+export * from './checkers.js'

package/src/data/string-dep/index.js

@@ -0,0 +1 @@
+// export * from "./string.js";

package/src/events/types/clipboard.d.ts

@@ -1,6 +1,6 @@
 import { __ZikoEvent__ } from "../__ZikoEvent__.js";
 import type { Callback, ClipboardEventKeys } from './__Shared__.js';
-import { ZikoUIElement } from "../../ui/index.js";
+import { UIElement } from "../../ui/index.js";
 
 declare class ZikoEventClipboard extends __ZikoEvent__ {
   constructor(target: any, customizer?: Function);
@@ -12,7 +12,7 @@ declare class ZikoEventClipboard extends __ZikoEvent__ {
 
 }
 
-declare const bindClipboardEvent: (target: ZikoUIElement, customizer?: Function) => ZikoEventClipboard;
+declare const bindClipboardEvent: (target: UIElement, customizer?: Function) => ZikoEventClipboard;
 
 export {
   ZikoEventClipboard,

package/src/events/types/focus.d.ts

@@ -1,6 +1,6 @@
 import { __ZikoEvent__ } from "../__ZikoEvent__.js";
 import type { Callback } from './__Shared__.js';
-import { ZikoUIElement } from "../../ui/index.js";
+import { UIElement } from "../../ui/index.js";
 
 declare class ZikoEventFocus extends __ZikoEvent__ {
   constructor(target: any, customizer?: Function);
@@ -11,7 +11,7 @@ declare class ZikoEventFocus extends __ZikoEvent__ {
 
 }
 
-declare const bindFocusEvent: (target: ZikoUIElement, customizer?: Function) => ZikoEventFocus;
+declare const bindFocusEvent: (target: UIElement, customizer?: Function) => ZikoEventFocus;
 
 export {
   ZikoEventFocus,

package/src/events/types/pointer.d.ts

@@ -1,6 +1,6 @@
 import { __ZikoEvent__ } from "../__ZikoEvent__.js";
 import type { EventMethodesBinder, Callback, PointerEventKeys } from './__Shared__.js';
-import { ZikoUIElement } from "../../ui/index.js";
+import { UIElement } from "../../ui/index.js";
 
 type PointerEventMethodesBinder = EventMethodesBinder<PointerEventKeys, ZikoEventPointer>;
 
@@ -37,7 +37,7 @@ declare class ZikoEventPointer extends __ZikoEvent__ implements PointerEventMeth
 
 }
 
-declare const bindPointerEvent: (target: ZikoUIElement, customizer?: Function) => ZikoEventPointer;
+declare const bindPointerEvent: (target: UIElement, customizer?: Function) => ZikoEventPointer;
 
 export {
   ZikoEventPointer,

package/src/hooks/use-state.js

@@ -7,17 +7,20 @@ export function useState(initialValue) {
         return {
             value,
             isStateGetter: () => true,
-            _subscribe: (fn, UIElement) => {
+            _subscribe: (
+                fn, 
+                // UIElement 
+            ) => {
                 subscribers.add(fn);
 
-                const observer = new MutationObserver(() => {
-                    if (!document.body.contains(UIElement.element)) {
-                        subscribers.delete(fn);
-                        observer.disconnect();
-                    }
-                });
+                // const observer = new MutationObserver(() => {
+                //     if (!document.body.contains(UIElement.element)) {
+                //         subscribers.delete(fn);
+                //         observer.disconnect();
+                //     }
+                // });
 
-                observer.observe(document.body, { childList: true, subtree: true });
+                // observer.observe(document.body, { childList: true, subtree: true });
             },
         };
     }

package/src/index.js

@@ -4,9 +4,10 @@ export * from "./time/index.js";
 export * from "./data/index.js";
 export * from "./reactivity/index.js"
 export * from "./app/index.js";
+export * from './hooks/index.js';
+export * from './use/index.js'
 
 export * from "./events/index.js";
-export * from "./use/index.js";
 
 if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());

package/src/math/index.js

@@ -1,19 +1,19 @@
-import * as __Const__ from "./const.js"
-import * as __Functions__ from "./functions/index.js"
-import * as __Random__ from "./random"
-import * as __Complex__ from "./complex"
-import * as __Matrix__ from "./matrix"
-import * as __Discrect__ from "./discret"
-import * as __Utils__ from "./utils"
-const Math = {
-    ...__Const__,
-    ...__Functions__,
-    ...__Complex__,
-    ...__Matrix__,
-    ...__Random__,
-    ...__Utils__,
-    ...__Discrect__,
-}
+// import * as __Const__ from "./const.js"
+// import * as __Functions__ from "./functions/index.js"
+// import * as __Random__ from "./random"
+// import * as __Complex__ from "./complex"
+// import * as __Matrix__ from "./matrix"
+// import * as __Discrect__ from "./discret"
+// import * as __Utils__ from "./utils"
+// const Math = {
+//     ...__Const__,
+//     ...__Functions__,
+//     ...__Complex__,
+//     ...__Matrix__,
+//     ...__Random__,
+//     ...__Utils__,
+//     ...__Discrect__,
+// }
 export * from "./const.js"
 export * from "./functions/index.js"
 export * from "./complex"
@@ -22,5 +22,5 @@ export * from "./discret"
 export * from "./random"
 export * from "./utils"
 export * from "./statistics"
-export default Math;
+// export default Math;
 

package/src/reactivity/hooks/UI/index.js

@@ -1,4 +1,4 @@
-export * from "./useStyle.js";
+// export * from "./useStyle.js";
 // export * from "./useTheme";
 // export * from "../Head/useTitle";
 // export * from "../Head/useFavIcon";

package/src/reactivity/hooks/UI/useRoot.js

@@ -1,4 +1,4 @@
-import { Str } from "../../../data"
+import { camel2hyphencase } from "../../../data/converter/string/index.js";
 class ZikoUseRoot{
     constructor(props){
         this.props={};
@@ -15,7 +15,7 @@ class ZikoUseRoot{
         return this;
     }
     #setOneProp(prop, value){
-        const CssProp = `--${Str.camel2hyphencase(prop)}`
+        const CssProp = `--${camel2hyphencase(prop)}`
         document.documentElement.style.setProperty(CssProp,value);
         Object.assign(this.props, {[prop]: `var(${CssProp})`})
         Object.assign(this, {[prop] : `var(${CssProp})`})
@@ -23,7 +23,7 @@ class ZikoUseRoot{
 }
 
 const useRootValue=CssVar=>{
-    if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`
+    if(!CssVar.startsWith("--")) CssVar = `--${camel2hyphencase(CssVar)}`
     return `var(${CssVar})`
 }
 // const useRootStaticValue=CssVar=>{

package/src/time/animation/index.js

@@ -1,76 +1,94 @@
-import { Ease } from "../utils";
-import { map } from "../../math/utils"
-class ZikoTimeAnimation{
-    constructor(callback,ease=Ease.Linear,step=50,{t=[0,null],start=true,duration=3000}={}){
-        this.cache={
-            isRunning:false,
-            AnimationId:null,
-            startTime:null,
-            ease,
-            step,
-            intervall:t,
-            started:start,
-            duration
-        }
-        this.t=0;
-        this.tx=0;
-        this.ty=0;
-        this.i=0;
-        this.callback=callback;
-    }
-    #animation_handler(){
-            this.t+=this.cache.step;
-            this.i++;
-            this.tx=map(this.t,0,this.cache.duration,0,1);
-            this.ty=this.cache.ease(this.tx);
-            this.callback(this)
-            if(this.t>=this.cache.duration){
-                clearInterval(this.cache.AnimationId);
-                this.cache.isRunning=false;
-            }
-    }
-    reset(restart=true){
-        this.t=0
-        this.tx=0;
-        this.ty=0;
-        this.i=0;
-        if(restart)this.start();
-        return this;
-    }
-    #animate(reset=true){
-        if(!this.cache.isRunning){
-            if(reset)this.reset(false);
-            this.cache.isRunning=true;
-            this.cache.startTime = Date.now();
-            this.cache.AnimationId=setInterval(this.#animation_handler.bind(this),this.cache.step);
-        }
-        return this;
-    }
-    start(){
-        this.#animate(true);
-        return this;
+import { Linear } from "../ease/index.js";
+import { map } from "../../math/utils/index.js";
+
+class TimeAnimation {
+  constructor(callback, { ease = Linear, step = 50, t0 = 0, start = true, duration = 3000 } = {}) {
+    this.callback = callback;
+    this.state = {
+      isRunning: false,
+      animationId: null,
+      startTime: null,
+      ease,
+      step,
+    //   interval: [t0, t1],
+      autoStart: start,
+      duration
+    };
+
+    this.t = 0;   // elapsed time
+    this.tx = 0;  // normalized [0,1]
+    this.ty = 0;  // eased value
+    this.i = 0;   // frame index
+
+    if (this.state.autoStart) {
+      this.start();
     }
-    pause(){
-        if (this.cache.isRunning) {
-            clearTimeout(this.cache.AnimationId);
-            this.cache.isRunning = false;
-          }
-        return this;
+  }
+
+  // ---- private loop handler ----
+  #tick = () => {
+    this.t += this.state.step;
+    this.i++;
+
+    this.tx = map(this.t, 0, this.state.duration, 0, 1);
+    this.ty = this.state.ease(this.tx);
+
+    this.callback(this);
+
+    if (this.t >= this.state.duration) {
+      clearInterval(this.state.animationId);
+      this.state.isRunning = false;
     }
-    resume(){
-        this.#animate(false);
-        return this;
+  };
+
+  // ---- core runner ----
+  #run(reset = true) {
+    if (!this.state.isRunning) {
+      if (reset) this.reset(false);
+
+      this.state.isRunning = true;
+      this.state.startTime = Date.now();
+      this.state.animationId = setInterval(this.#tick, this.state.step);
     }
-    stop(){
-        this.pause();
-        this.reset(false);
-        return this;
+    return this;
+  }
+
+  // ---- lifecycle methods ----
+  start() {
+    return this.#run(true);
+  }
+
+  pause() {
+    if (this.state.isRunning) {
+      clearInterval(this.state.animationId);
+      this.state.isRunning = false;
     }
-    // clear(){
-    // }
-    // stream(){
-    // }
+    return this;
+  }
+
+  resume() {
+    return this.#run(false);
+  }
+
+  stop() {
+    this.pause();
+    this.reset(false);
+    return this;
+  }
+
+  reset(restart = true) {
+    this.t = 0;
+    this.tx = 0;
+    this.ty = 0;
+    this.i = 0;
+
+    if (restart) this.start();
+    return this;
+  }
 }
 
-const useAnimation=(callback,ease=Ease.Linear,step=50,config)=>new ZikoTimeAnimation(callback,ease=Ease.Linear,step=50,config)
-export{useAnimation}
+// Hook-style factory
+const animation = (callback, {ease, t0, t1, start, duration} = {}) =>
+  new TimeAnimation(callback, {ease, t0, t1, start, duration});
+
+export { TimeAnimation, animation };

package/src/time/clocks/clock.js

@@ -0,0 +1,62 @@
+import { Tick } from "./tick.js";
+
+class Clock extends Tick {
+  constructor(tickMs = 1000 / 60) {
+    super(tickMs, () => this._tick());
+    this.elapsed = 0;
+    this._lastTime = performance.now();
+    this._callbacks = new Set();
+  }
+
+  _tick() {
+    const now = performance.now();
+    const delta = now - this._lastTime;
+    this.elapsed += delta;
+    this._lastTime = now;
+
+    for (const cb of this._callbacks) {
+      cb({ elapsed: this.elapsed, delta });
+    }
+  }
+
+  onTick(cb) {
+    this._callbacks.add(cb);
+    return () => this._callbacks.delete(cb); 
+  }
+
+  reset() {
+    this.elapsed = 0;
+    this._lastTime = performance.now();
+  }
+
+  pause() {
+    super.stop();
+  }
+
+  resume() {
+    this._lastTime = performance.now();
+    super.start();
+  }
+}
+
+const clock = (tickMs) => new Clock(tickMs)
+export{
+  Clock,
+  clock
+}
+
+
+/* 
+
+    const clock = new Clock(200);
+
+    clock.onTick(({ elapsed, delta }) => {
+      console.log(`Elapsed: ${elapsed.toFixed(0)}ms, Delta: ${delta.toFixed(0)}ms`);
+    });
+
+    clock.start();
+
+    setTimeout(() => clock.pause(), 1000);  
+    setTimeout(() => clock.resume(), 2000); 
+
+*/

package/src/time/clocks/index.js

@@ -0,0 +1,3 @@
+export * from './clock.js'
+export * from './tick.js'
+export * from './scheduler.js'

package/src/time/clocks/scheduler.js

@@ -0,0 +1,69 @@
+export class TimeScheduler {
+  constructor(tasks = [], { repeat = 1, loop = false } = {}) {
+    this.tasks = tasks;
+    this.repeat = repeat;
+    this.loop = loop;
+
+    this.stopped = false;
+    this.running = false;
+
+    // lifecycle hooks
+    this.onStart = null;
+    this.onTask = null;
+    this.onEnd = null;
+  }
+
+  async run() {
+    if (this.running) return;
+    this.running = true;
+    this.stopped = false;
+
+    if (this.onStart) this.onStart();
+
+    let repeatCount = this.repeat;
+
+    do {
+      for (const task of this.tasks) {
+        if (this.stopped) return;
+
+        if (Array.isArray(task)) {
+          // Parallel tasks
+          await Promise.all(
+            task.map(({ fn, delay = 0 }) =>
+              new Promise(async (resolve) => {
+                if (delay > 0) await new Promise(r => setTimeout(r, delay));
+                if (this.onTask) this.onTask(fn);
+                await fn();
+                resolve();
+              })
+            )
+          );
+        } else {
+          // Single task
+          const { fn, delay = 0 } = task;
+          if (delay > 0) await new Promise(r => setTimeout(r, delay));
+          if (this.onTask) this.onTask(fn);
+          await fn();
+        }
+      }
+    } while (this.loop && !this.stopped && (repeatCount === Infinity || repeatCount-- > 1));
+
+    if (!this.stopped && this.onEnd) this.onEnd();
+    this.running = false;
+  }
+
+  stop() {
+    this.stopped = true;
+    this.running = false;
+  }
+
+  addTask(task) {
+    this.tasks.push(task);
+  }
+
+  clearTasks() {
+    this.tasks = [];
+  }
+}
+
+export const Scheduler = (tasks, { repeat = null} = {}) => new TimeScheduler(tasks, { repeat})

package/src/time/clocks/tick.js

@@ -0,0 +1,34 @@
+class Tick {
+  constructor(ms, fn) {
+    this.ms = ms;
+    this.fn = fn;
+    this.id = null;
+    this.running = false;
+  }
+
+  start() {
+    if (!this.running) {
+      this.running = true;
+      this.id = setInterval(this.fn, this.ms);
+    }
+    return this;
+  }
+
+  stop() {
+    if (this.running) {
+      this.running = false;
+      clearInterval(this.id);
+      this.id = null;
+    }
+    return this;
+  }
+
+  isRunning() {
+    return this.running;
+  }
+}
+const tick = (ms, fn) => new Tick(ms, fn);
+export{
+  Tick,
+  tick
+}

package/src/time/converters/index.js

@@ -0,0 +1 @@
+export const step_fps = (step_or_fps) => 1000 / step_or_fps;

package/src/time/delay/index.js

@@ -0,0 +1,2 @@
+export * from './timeout.js';
+export * from './sleep.js';

package/src/time/delay/sleep.js

@@ -0,0 +1,3 @@
+export const sleep= ms => new Promise(res => setTimeout(res, ms));
+
+// use it with await 

package/src/time/delay/timeout.js

@@ -0,0 +1,15 @@
+export function timeout(ms, fn) {
+  let id;
+  const promise = new Promise((resolve) => {
+    id = setTimeout(() => {
+      if (fn) fn();
+      resolve();
+    }, ms);
+  });
+
+  return {
+    id,
+    clear: () => clearTimeout(id),
+    promise
+  };
+}