ziko 0.41.2 → 0.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.41.2",
+  "version": "0.42.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",
@@ -60,7 +60,7 @@
     "./time": {},
     "./components": {}
   },
-  "sideEffects" : false,
+  "sideEffects" : true,
   "bin": {
     "create-ziko-app": "starter/bin/index.js"
   },

package/src/__ziko__/__cache__.js

@@ -2,5 +2,8 @@ export const __CACHE__ = {
     ui_index : 0,
     get_ui_index:function(){
         return this.ui_index ++
+    },
+    register_ui: function(UIElement){
+        
     }
 }

package/src/__ziko__/__hydration__.js

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

package/src/__ziko__/__state__.js

@@ -0,0 +1,12 @@
+export const __State__ = {
+    store : new Map(),
+    index : import.meta.hot?.data?.__Ziko__?.__State__?.index ?? 0,
+    register: function(state){
+        console.log({
+            hmr : import.meta.hot?.data.__Ziko__.__State__.index,
+            index : this.index
+        })
+        this.store.set(this.index++, state)
+    }
+    
+}

package/src/__ziko__/__ui__.js

@@ -1,22 +1,28 @@
-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(){
-        
+export class UIStore extends Array {
+    constructor(...args) {
+        super(...args); 
+    }
+    getItemById(id) {
+        return this.find(n => n.element.id === id);
+    }
+    getItemsByTagName(tag) {
+        return this.filter(n => n.element.tagName.toLowerCase() === tag.toLowerCase());
+    }
+    getElementsByClassName(className) {
+        return this.filter(n => n.element.classList?.contains(className));
     }
-}
+    querySelector(selector) {
+        const el = globalThis?.document?.querySelector(selector);
+        if (!el) return null;
+        return this.find(ui => ui.element === el) || null;
+    }
+    querySelectorAll(selector) {
+        const els = globalThis?.document?.querySelectorAll(selector);
+        return Array.from(els)
+            .map(el => this.find(ui => ui.element === el))
+            .filter(Boolean);
+    }
+}
+
+// create the singleton
+export const __UI__ = new UIStore();

package/src/__ziko__/index.js

@@ -1,17 +1,19 @@
 import { defineParamsGetter } from './params.js';
 import { __UI__ } from './__ui__.js';
 import { __Config__ } from './__config__.js';
-import { __HYDRATION__, __HYDRATION_MAP__ } from './__hydration__.js';
+import { __HYDRATION__ } from './__hydration__.js';
 import { __CACHE__ } from './__cache__.js';
+import { __State__ } from './__state__.js';
 export function __init__global__(){
     if ( !globalThis?.__Ziko__ ){
         globalThis.__Ziko__ = {
                     __UI__,
                     __HYDRATION__,
-                    __HYDRATION_MAP__,
+                    __State__,
                     __Config__,
                     __CACHE__,
                 };
         defineParamsGetter(__Ziko__)
     }
 }
+export { UIStore } from './__ui__.js'

package/src/hooks/use-derived.js

@@ -3,38 +3,6 @@ export function useDerived(deriveFn, sources) {
     const subscribers = new Set();
     let paused = false;
 
-    function getValue() {
-        return {
-            value,
-            isStateGetter: () => true,
-            _subscribe: (fn) => {
-                subscribers.add(fn);
-            },
-        };
-    }
-
-    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(() => {
@@ -45,8 +13,11 @@ export function useDerived(deriveFn, sources) {
                     subscribers.forEach(fn => fn(value));
                 }
             }
-        }, { element: document.body }); // dummy UIElement
+        }); 
     });
-
-    return [getValue, setValue, controller];
+    return () => ({
+        value,
+        isStateGetter : () => true,
+        _subscribe: (fn) => subscribers.add(fn)
+    })
 }

package/src/hooks/use-reactive.js

@@ -1,7 +1,17 @@
 import {mapfun} from '../math'
 import { useState } from './use-state.js'
 
-const useReactive = (nested_value) => mapfun(n => useState(n), nested_value)
+const useReactive = (nested_value) => mapfun(
+    n => {
+        const state = useState(n)
+        // console.log(state)
+        return {
+            get : state[0],
+            set : state[1],
+        }
+    }, 
+    nested_value
+)
 export{
     useReactive
 }

package/src/hooks/use-state.js

@@ -1,55 +1,62 @@
+import { __init__global__ } from "../__ziko__/index.js";
+if(!globalThis.__Ziko__) __init__global__()
+
+    // HMR persistence
+if (import.meta.hot) {
+    import.meta.hot.data.__Ziko__ = import.meta.hot.data.__Ziko__ || globalThis.__Ziko__;
+    globalThis.__Ziko__ = import.meta.hot.data.__Ziko__;
+    // import.meta.hot.accept(n=>console.log(n));
+    // console.log(import.meta.hot.data.__Ziko__.__State__.store)
+}
+
+
+
 export function useState(initialValue) {
-    let value = initialValue;
-    const subscribers = new Set();
-    let paused = false;
+
+    // console.log(import.meta.hot.data.__Ziko__.__State__.store.get(0))
+
+    const {store, index} = __Ziko__.__State__
+    __Ziko__.__State__.register({
+            value : initialValue,
+            subscribers : new Set(),
+            paused : false
+    })
+
+    const current = store.get(index);
 
     function getValue() {
         return {
-            value,
+            value: current.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 });
-            },
+            _subscribe: (fn) => current.subscribers.add(fn),
         };
     }
 
     function setValue(newValue) {
-        if (paused) return;
-        if (typeof newValue === "function") newValue = newValue(value);
-        if (newValue !== value) {
-            value = newValue;
-            subscribers.forEach(fn => fn(value));
+        if (current.paused) return;
+        if (typeof newValue === "function") newValue = newValue(current.value);
+        if (newValue !== current.value) {
+            current.value = newValue;
+            current.subscribers.forEach(fn => fn(current.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));
+        pause: () => { current.paused = true; },
+        resume: () => { current.paused = false; },
+        clear: () => { current.subscribers.clear(); },
+        force: (newValue) => {
+            if (typeof newValue === "function") newValue = newValue(current.value);
+            current.value = newValue;
+            current.subscribers.forEach(fn => fn(current.value));
         },
-        getSubscribers: () => new Set(subscribers),
+        getSubscribers: () => new Set(current.subscribers),
     };
 
     return [getValue, setValue, controller];
 }
 
-export const isStateGetter = (arg) => {
-    return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
-}
 
+export const isStateGetter = (arg) => {
+    return typeof arg === 'function' && arg?.()?.isStateGetter?.();
+};

package/src/time/clocks/tick.js

@@ -1,15 +1,26 @@
 class Tick {
-  constructor(ms, fn) {
+  constructor(fn, ms, count = Infinity, start) {
     this.ms = ms;
     this.fn = fn;
+    this.count = count;
+    this.frame = 1;
     this.id = null;
     this.running = false;
+    if(start) this.start()
   }
 
   start() {
     if (!this.running) {
       this.running = true;
-      this.id = setInterval(this.fn, this.ms);
+      this.frame = 1;
+      this.id = setInterval(() => {
+        if (this.frame > this.count) {
+          this.stop();
+          return;
+        }
+        this.fn.call(null, this);
+        this.frame++;
+      }, this.ms);
     }
     return this;
   }
@@ -27,8 +38,11 @@ class Tick {
     return this.running;
   }
 }
-const tick = (ms, fn) => new Tick(ms, fn);
-export{
+
+// Helper factory
+const tick = (fn, ms, count = Infinity, start = true) => new Tick(fn, ms, count, start);
+
+export {
   Tick,
   tick
-}
+};

package/src/ui/__methods__/style.js

@@ -1,23 +1,23 @@
 import { isStateGetter } from '../../hooks/use-state.js'
 export const StyleMethods = {
-    style(styles){
-        for(let key in styles){
-            const value = styles[key];
-            if(isStateGetter(value)){
-                const getter = value()
-                Object.assign(this.element.style, {[key] : getter.value})
-                getter._subscribe(
-                    (newValue) => {
-                        console.log({newValue})
-                        Object.assign(this.element.style, {[key] : newValue})
-                    },
-                    // this 
-                );
-            }
-            else Object.assign(this.element.style, {[key] : value})
-        }
-        return this;
-    },
+    // style(styles){
+    //     for(let key in styles){
+    //         const value = styles[key];
+    //         if(isStateGetter(value)){
+    //             const getter = value()
+    //             Object.assign(this.element.style, {[key] : getter.value})
+    //             getter._subscribe(
+    //                 (newValue) => {
+    //                     console.log({newValue})
+    //                     Object.assign(this.element.style, {[key] : newValue})
+    //                 },
+    //                 // this 
+    //             );
+    //         }
+    //         else Object.assign(this.element.style, {[key] : value})
+    //     }
+    //     return this;
+    // },
     size(width, height){
         return this.style({width, height})
     },

package/src/ui/constructors/UIElement.js

@@ -7,7 +7,7 @@ import {
   EventsMethodes,
   StyleMethods
 } from "../__methods__/index.js";
-
+import { isStateGetter } from "../../hooks/use-state.js";
 import { 
   useCustomEvent,
   useSwipeEvent,
@@ -16,11 +16,11 @@ import {
   watchAttr,
   watchChildren
 } from "../../reactivity/index.js"
-import { Random } from "../../math/index.js";
-import {__init__global__} from '../../__ziko__/index.js';
+// import { Random } from "../../math/index.js";
+import {__init__global__, UIStore} from '../../__ziko__/index.js';
 __init__global__()
 class UIElement extends UINode{
-  constructor({element, name ='', type="html", useDefaultStyle=false}={}){
+  constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render, useDefaultStyle=false}={}){
     super()
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
@@ -71,8 +71,8 @@ class UIElement extends UINode{
       resize:null,
       intersection:null
     }
-    if(element)Object.assign(this.cache,{element});
-    this.uuid = `${this.cache.name}-${Random.string(16)}`
+    if(element) Object.assign(this.cache,{element});
+    // this.uuid = `${this.cache.name}-${Random.string(16)}`
     this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
     useDefaultStyle && this.style({ 
       position: "relative",
@@ -82,9 +82,9 @@ class UIElement extends UINode{
       width : "auto",
       height : "auto"
      });
-    this.items = [];
+    this.items = new UIStore();
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-    element && globalThis.__Ziko__.__Config__.default.render && this?.render?.()
+    element && render && this?.render?.()
     if(
       // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
       // && 
@@ -93,9 +93,9 @@ class UIElement extends UINode{
       this.isInteractive()
     ){
       this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-      globalThis.__Ziko__.__HYDRATION__.map.set(globalThis.__Ziko__.__HYDRATION__.index, ()=>this);
-      globalThis.__Ziko__.__HYDRATION__.increment()
+      globalThis.__Ziko__.__HYDRATION__.register(() => this)
     }
+    globalThis.__Ziko__.__UI__.push(this)
   }
   get element(){
     return this.cache.element;
@@ -106,6 +106,24 @@ class UIElement extends UINode{
   isZikoUIElement(){
     return true;
   }
+  style(styles){
+    for(let key in styles){
+        const value = styles[key];
+        if(isStateGetter(value)){
+            const getter = value()
+            Object.assign(this.element.style, {[key] : getter.value})
+            getter._subscribe(
+                (newValue) => {
+                    console.log({newValue})
+                    Object.assign(this.element.style, {[key] : newValue})
+                },
+                // this 
+            );
+        }
+        else Object.assign(this.element.style, {[key] : value})
+    }
+    return this;
+  }
   get st(){
     return this.cache.style;
   }
@@ -146,14 +164,13 @@ class UIElement extends UINode{
     return this.element.getBoundingClientRect().left;
   }
   clone(render=false) {
-    const UI = new this.constructor();
-    UI.__proto__=this.__proto__;
-    if(this.items.length){
-      const items = [...this.items].map(n=>n.clone());
-      UI.append(...items);
-    }
-    else UI.element=this.element.cloneNode(true);
-    return UI.render(render);
+    // UI.__proto__=this.__proto__;
+    // if(this.items.length){
+    //   const items = [...this.items].map(n=>n.clone());
+    //   UI.append(...items);
+    // }
+    // else UI.element=this.element.cloneNode(true);
+    // return UI.render(render);
   }
   [Symbol.iterator]() {
     return this.items[Symbol.iterator]();
@@ -172,14 +189,14 @@ class UIElement extends UINode{
     this.cache.isFrozzen=freeze;
     return this;
   }
-  setTarget(tg) {
-    if(this.isBody) return ;
-    if (tg?.isZikoUIElement) tg = tg.element;
-    this.unrender();
-    this.target = tg;
-    this.render();
-    return this;
-  }
+  // setTarget(tg) {
+  //   if(this.isBody) return ;
+  //   if (tg?.isZikoUIElement) tg = tg.element;
+  //   this.unrender();
+  //   this.target = tg;
+  //   this.render();
+  //   return this;
+  // }
   describe(label){
     if(label)this.setAttr("aria-label",label)
   }

package/src/ui/web-component/index.js

@@ -1,4 +1,12 @@
-export function defineWC(name, UIElement, props = {}, { mode = 'open'} = {}) {
+export function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
+    if (globalThis.customElements?.get(name)) {
+        console.warn(`Custom element "${name}" is already defined`);
+        return; // skip redefinition
+    }
+    if(name.search('-') === -1){
+        console.warn(`"${name}" is not a valid custom element name`);
+        return; 
+    }
     globalThis.customElements?.define(
         name,
         class extends HTMLElement {