ziko 0.41.1 → 0.42.0

package/package.json

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

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__/index.js

@@ -3,12 +3,14 @@ import { __UI__ } from './__ui__.js';
 import { __Config__ } from './__config__.js';
 import { __HYDRATION__, __HYDRATION_MAP__ } 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__,
+                    // __HYDRATION_MAP__,
                     __Config__,
                     __CACHE__,
                 };

package/src/hooks/use-derived.js

@@ -3,47 +3,6 @@ export function useDerived(deriveFn, sources) {
     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(() => {
@@ -54,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/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 {