ziko 0.36.1 → 0.37.0

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Aug 12 2025 11:00:20 GMT+0100 (UTC+01:00)
+  Date : Fri Aug 15 2025 09:48:20 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1292,17 +1292,25 @@ function __addItem__(adder, pusher, ...ele) {
   }
   for (let i = 0; i < ele.length; i++) {
     if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-    if (
-      typeof globalThis?.Node === "function" &&
-      ele[i] instanceof globalThis?.Node
-    )
-      ele[i] = new this.constructor(ele[i]);
+    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
     if (ele[i]?.isZikoUIElement) {
-      ele[i].cache.parent = this;
-      this.element[adder](ele[i].element);
-      ele[i].target = this.element;
-      this.items[pusher](ele[i]);
-    } else if (ele[i] instanceof Object) {
+        ele[i].cache.parent = this;
+        this.element[adder](ele[i].element);
+        ele[i].target = this.element;
+        this.items[pusher](ele[i]);
+    } 
+    // Fix Items Latter
+    if( ele[i] instanceof Function){
+      const getter = ele[i]();
+      if (getter.isStateGetter) {
+        const textNode = document?.createTextNode(getter.value);
+        this.element.appendChild(textNode);
+        getter._subscribe(
+          (newValue) => (textNode.textContent = newValue),
+        );
+      }
+    }
+    else if (ele[i] instanceof Object) {
       if (ele[i]?.style) this.style(ele[i]?.style);
       if (ele[i]?.attr) {
         Object.entries(ele[i].attr).forEach((n) =>
@@ -3293,52 +3301,16 @@ class ZikoUseMediaQuery {
 
 const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
-class ZikoUseRoot{
-    constructor(props){
-        this.props={};
-        props && this.set(props);
-    }
-    get(prop){
-        return this.props[prop]
-    }
-    // getStaticValue(){
-    //     return document.documentElement.style.getPropertyValue("--primary-col")
-    // }
-    set(props){
-        Object.entries(props).forEach(([key,value])=>this.#setOneProp(key, value));
-        return this;
-    }
-    #setOneProp(prop, value){
-        const CssProp = `--${Str.camel2hyphencase(prop)}`;
-        document.documentElement.style.setProperty(CssProp,value);
-        Object.assign(this.props, {[prop]: `var(${CssProp})`});
-        Object.assign(this, {[prop] : `var(${CssProp})`});
-    }
-}
-
-const useRootValue=CssVar=>{
-    if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`;
-    return `var(${CssVar})`
-};
-// const useRootStaticValue=CssVar=>{
-//     if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`
-//     return globalThis.document.documentElement.style.getPropertyValue(CssVar)  
-// }
-const useRoot=(props)=>new ZikoUseRoot(props);
-
 // export * from "./window"
 
 var Hooks = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ZikoHead: ZikoHead$1,
-  ZikoUseRoot: ZikoUseRoot,
   ZikoUseStyle: ZikoUseStyle,
   useFavIcon: useFavIcon$1,
   useHead: useHead$1,
   useMediaQuery: useMediaQuery,
   useMeta: useMeta$1,
-  useRoot: useRoot,
-  useRootValue: useRootValue,
   useStyle: useStyle,
   useSuccesifKeys: useSuccesifKeys,
   useTitle: useTitle$1
@@ -8070,6 +8042,29 @@ const App={
     // ...Params
 };
 
+function useState(initialValue) {
+    let value = initialValue;
+    const subscribers = new Set();
+
+    function getValue() {
+        return {
+            value,
+            isStateGetter: () => true,
+            _subscribe: (fn) => subscribers.add(fn),
+        };
+    }
+
+    function setValue(newValue) {
+        if (typeof newValue === "function") newValue = newValue(value);
+        if (newValue !== value) {
+            value = newValue;
+            subscribers.forEach(fn => fn(value));
+        }
+    }
+
+    return [getValue, setValue];
+}
+
 class ZikoUseChannel{
     constructor(name = ""){
         this.channel = new BroadcastChannel(name);
@@ -8119,6 +8114,123 @@ class ZikoUseChannel{
 }
 const useChannel = name => new ZikoUseChannel(name);
 
+class ZikoUseThreed {
+    #workerContent;
+    constructor() {
+        this.#workerContent = (
+            function (msg) {
+                try {
+                    const func = new Function("return " + msg.data.fun)();
+                    let result = func();
+                    postMessage({ result });
+                } catch (error) {
+                    postMessage({ error: error.message });
+                } finally {
+                    if (msg.data.close) self.close();
+                }
+            }
+        ).toString();
+        this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
+        this.worker = new Worker(window.URL.createObjectURL(this.blob));
+    }
+    call(func, callback, close = true) {
+        this.worker.postMessage({
+            fun: func.toString(),
+            close
+        });
+        this.worker.onmessage = function (e) {
+            if (e.data.error) {
+                console.error(e.data.error);
+            } else {
+                callback(e.data.result);
+            }
+        };
+        return this;
+    }
+}
+
+const useThread = (func, callback , close) => {
+    const T = new ZikoUseThreed();
+    if (func) {
+        T.call(func, callback , close);
+    }
+    return T;
+};
+
+class ZikoUseRoot {
+    constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
+        this.currentPropsMap = PropsMap;
+        this.namespace = namespace;
+        this.ValidateCssProps = ValidateCssProps;
+        // this.pairs = {};
+        // this.#maintain()
+        this.use(PropsMap);
+    }
+    use(PropsMap){
+        if(this.ValidateCssProps) ValidateCssProps(PropsMap);
+        this.currentPropsMap = PropsMap;
+        this.#maintain();
+        return this;
+    }
+    #maintain(){
+       const root = globalThis?.document?.documentElement?.style;
+       for(let prop in this.currentPropsMap){
+        const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`;
+           root.setProperty(
+            cssProp, 
+            this.currentPropsMap[prop]
+            ); 
+            console.log({cssProp});
+        //    Object.assign(this.pairs, {
+        //     [prop] : `var(--${this.namespace}-${prop})`
+        //    })
+           Object.defineProperty(this, prop, {
+                value: `var(${cssProp})`,
+                writable: true,
+                configurable: true,
+                enumerable: false 
+           });
+       }
+    }
+}
+
+function ValidateCssProps(PropsMap){
+    const validProps = new Set(Object.keys(document.documentElement.style));
+    for (let key in PropsMap) {
+        if (!validProps.has(key)) {
+            throw new Error(`Invalid CSS property: "${key}"`);
+        }
+    }
+}
+
+const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new ZikoUseRoot(PropsMap, {namespace, register, ValidateCssProps});
+
+// Usage 
+
+/*
+const Styles = {
+ S1 : {
+  background : 'white',
+  color : 'darkblue'
+  border : '2px darkblue solid"'
+ },
+ S2 : {
+  background : 'darkblue',
+  color : 'white'
+  border : '2px green solid"'
+ }
+}
+const {use, border, background, color} = useRoot(Style.S1)
+
+tags.p("Test useRoot ").style({
+  border,
+  color,
+  background,
+  padding : '10px'
+})
+
+*/
+
 // To do : remove old items
 class ZikoUseStorage{
     constructor(storage, globalKey, initialValue){
@@ -8188,49 +8300,6 @@ class ZikoUseStorage{
 const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
 const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
 
-class ZikoUseThreed {
-    #workerContent;
-    constructor() {
-        this.#workerContent = (
-            function (msg) {
-                try {
-                    const func = new Function("return " + msg.data.fun)();
-                    let result = func();
-                    postMessage({ result });
-                } catch (error) {
-                    postMessage({ error: error.message });
-                } finally {
-                    if (msg.data.close) self.close();
-                }
-            }
-        ).toString();
-        this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-        this.worker = new Worker(window.URL.createObjectURL(this.blob));
-    }
-    call(func, callback, close = true) {
-        this.worker.postMessage({
-            fun: func.toString(),
-            close
-        });
-        this.worker.onmessage = function (e) {
-            if (e.data.error) {
-                console.error(e.data.error);
-            } else {
-                callback(e.data.result);
-            }
-        };
-        return this;
-    }
-}
-
-const useThread = (func, callback , close) => {
-    const T = new ZikoUseThreed();
-    if (func) {
-        T.call(func, callback , close);
-    }
-    return T;
-};
-
 [
     App,
     Math$1,
@@ -8578,8 +8647,8 @@ exports.useLocaleStorage = useLocaleStorage;
 exports.useMediaQuery = useMediaQuery;
 exports.useMeta = useMeta$1;
 exports.useRoot = useRoot;
-exports.useRootValue = useRootValue;
 exports.useSessionStorage = useSessionStorage;
+exports.useState = useState;
 exports.useStyle = useStyle;
 exports.useSuccesifKeys = useSuccesifKeys;
 exports.useSwipeEvent = useSwipeEvent;

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Aug 12 2025 11:00:20 GMT+0100 (UTC+01:00)
+  Date : Fri Aug 15 2025 09:48:20 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1294,17 +1294,25 @@
     }
     for (let i = 0; i < ele.length; i++) {
       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-      if (
-        typeof globalThis?.Node === "function" &&
-        ele[i] instanceof globalThis?.Node
-      )
-        ele[i] = new this.constructor(ele[i]);
+      if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
       if (ele[i]?.isZikoUIElement) {
-        ele[i].cache.parent = this;
-        this.element[adder](ele[i].element);
-        ele[i].target = this.element;
-        this.items[pusher](ele[i]);
-      } else if (ele[i] instanceof Object) {
+          ele[i].cache.parent = this;
+          this.element[adder](ele[i].element);
+          ele[i].target = this.element;
+          this.items[pusher](ele[i]);
+      } 
+      // Fix Items Latter
+      if( ele[i] instanceof Function){
+        const getter = ele[i]();
+        if (getter.isStateGetter) {
+          const textNode = document?.createTextNode(getter.value);
+          this.element.appendChild(textNode);
+          getter._subscribe(
+            (newValue) => (textNode.textContent = newValue),
+          );
+        }
+      }
+      else if (ele[i] instanceof Object) {
         if (ele[i]?.style) this.style(ele[i]?.style);
         if (ele[i]?.attr) {
           Object.entries(ele[i].attr).forEach((n) =>
@@ -3295,52 +3303,16 @@
 
   const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
-  class ZikoUseRoot{
-      constructor(props){
-          this.props={};
-          props && this.set(props);
-      }
-      get(prop){
-          return this.props[prop]
-      }
-      // getStaticValue(){
-      //     return document.documentElement.style.getPropertyValue("--primary-col")
-      // }
-      set(props){
-          Object.entries(props).forEach(([key,value])=>this.#setOneProp(key, value));
-          return this;
-      }
-      #setOneProp(prop, value){
-          const CssProp = `--${Str.camel2hyphencase(prop)}`;
-          document.documentElement.style.setProperty(CssProp,value);
-          Object.assign(this.props, {[prop]: `var(${CssProp})`});
-          Object.assign(this, {[prop] : `var(${CssProp})`});
-      }
-  }
-
-  const useRootValue=CssVar=>{
-      if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`;
-      return `var(${CssVar})`
-  };
-  // const useRootStaticValue=CssVar=>{
-  //     if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`
-  //     return globalThis.document.documentElement.style.getPropertyValue(CssVar)  
-  // }
-  const useRoot=(props)=>new ZikoUseRoot(props);
-
   // export * from "./window"
 
   var Hooks = /*#__PURE__*/Object.freeze({
     __proto__: null,
     ZikoHead: ZikoHead$1,
-    ZikoUseRoot: ZikoUseRoot,
     ZikoUseStyle: ZikoUseStyle,
     useFavIcon: useFavIcon$1,
     useHead: useHead$1,
     useMediaQuery: useMediaQuery,
     useMeta: useMeta$1,
-    useRoot: useRoot,
-    useRootValue: useRootValue,
     useStyle: useStyle,
     useSuccesifKeys: useSuccesifKeys,
     useTitle: useTitle$1
@@ -8072,6 +8044,29 @@
       // ...Params
   };
 
+  function useState(initialValue) {
+      let value = initialValue;
+      const subscribers = new Set();
+
+      function getValue() {
+          return {
+              value,
+              isStateGetter: () => true,
+              _subscribe: (fn) => subscribers.add(fn),
+          };
+      }
+
+      function setValue(newValue) {
+          if (typeof newValue === "function") newValue = newValue(value);
+          if (newValue !== value) {
+              value = newValue;
+              subscribers.forEach(fn => fn(value));
+          }
+      }
+
+      return [getValue, setValue];
+  }
+
   class ZikoUseChannel{
       constructor(name = ""){
           this.channel = new BroadcastChannel(name);
@@ -8121,6 +8116,123 @@
   }
   const useChannel = name => new ZikoUseChannel(name);
 
+  class ZikoUseThreed {
+      #workerContent;
+      constructor() {
+          this.#workerContent = (
+              function (msg) {
+                  try {
+                      const func = new Function("return " + msg.data.fun)();
+                      let result = func();
+                      postMessage({ result });
+                  } catch (error) {
+                      postMessage({ error: error.message });
+                  } finally {
+                      if (msg.data.close) self.close();
+                  }
+              }
+          ).toString();
+          this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
+          this.worker = new Worker(window.URL.createObjectURL(this.blob));
+      }
+      call(func, callback, close = true) {
+          this.worker.postMessage({
+              fun: func.toString(),
+              close
+          });
+          this.worker.onmessage = function (e) {
+              if (e.data.error) {
+                  console.error(e.data.error);
+              } else {
+                  callback(e.data.result);
+              }
+          };
+          return this;
+      }
+  }
+
+  const useThread = (func, callback , close) => {
+      const T = new ZikoUseThreed();
+      if (func) {
+          T.call(func, callback , close);
+      }
+      return T;
+  };
+
+  class ZikoUseRoot {
+      constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
+          this.currentPropsMap = PropsMap;
+          this.namespace = namespace;
+          this.ValidateCssProps = ValidateCssProps;
+          // this.pairs = {};
+          // this.#maintain()
+          this.use(PropsMap);
+      }
+      use(PropsMap){
+          if(this.ValidateCssProps) ValidateCssProps(PropsMap);
+          this.currentPropsMap = PropsMap;
+          this.#maintain();
+          return this;
+      }
+      #maintain(){
+         const root = globalThis?.document?.documentElement?.style;
+         for(let prop in this.currentPropsMap){
+          const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`;
+             root.setProperty(
+              cssProp, 
+              this.currentPropsMap[prop]
+              ); 
+              console.log({cssProp});
+          //    Object.assign(this.pairs, {
+          //     [prop] : `var(--${this.namespace}-${prop})`
+          //    })
+             Object.defineProperty(this, prop, {
+                  value: `var(${cssProp})`,
+                  writable: true,
+                  configurable: true,
+                  enumerable: false 
+             });
+         }
+      }
+  }
+
+  function ValidateCssProps(PropsMap){
+      const validProps = new Set(Object.keys(document.documentElement.style));
+      for (let key in PropsMap) {
+          if (!validProps.has(key)) {
+              throw new Error(`Invalid CSS property: "${key}"`);
+          }
+      }
+  }
+
+  const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new ZikoUseRoot(PropsMap, {namespace, register, ValidateCssProps});
+
+  // Usage 
+
+  /*
+  const Styles = {
+   S1 : {
+    background : 'white',
+    color : 'darkblue'
+    border : '2px darkblue solid"'
+   },
+   S2 : {
+    background : 'darkblue',
+    color : 'white'
+    border : '2px green solid"'
+   }
+  }
+  const {use, border, background, color} = useRoot(Style.S1)
+
+  tags.p("Test useRoot ").style({
+    border,
+    color,
+    background,
+    padding : '10px'
+  })
+
+  */
+
   // To do : remove old items
   class ZikoUseStorage{
       constructor(storage, globalKey, initialValue){
@@ -8190,49 +8302,6 @@
   const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
   const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
 
-  class ZikoUseThreed {
-      #workerContent;
-      constructor() {
-          this.#workerContent = (
-              function (msg) {
-                  try {
-                      const func = new Function("return " + msg.data.fun)();
-                      let result = func();
-                      postMessage({ result });
-                  } catch (error) {
-                      postMessage({ error: error.message });
-                  } finally {
-                      if (msg.data.close) self.close();
-                  }
-              }
-          ).toString();
-          this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-          this.worker = new Worker(window.URL.createObjectURL(this.blob));
-      }
-      call(func, callback, close = true) {
-          this.worker.postMessage({
-              fun: func.toString(),
-              close
-          });
-          this.worker.onmessage = function (e) {
-              if (e.data.error) {
-                  console.error(e.data.error);
-              } else {
-                  callback(e.data.result);
-              }
-          };
-          return this;
-      }
-  }
-
-  const useThread = (func, callback , close) => {
-      const T = new ZikoUseThreed();
-      if (func) {
-          T.call(func, callback , close);
-      }
-      return T;
-  };
-
   [
       App,
       Math$1,
@@ -8580,8 +8649,8 @@
   exports.useMediaQuery = useMediaQuery;
   exports.useMeta = useMeta$1;
   exports.useRoot = useRoot;
-  exports.useRootValue = useRootValue;
   exports.useSessionStorage = useSessionStorage;
+  exports.useState = useState;
   exports.useStyle = useStyle;
   exports.useSuccesifKeys = useSuccesifKeys;
   exports.useSwipeEvent = useSwipeEvent;