add useRoot

Author: zakarialaoui10

src/reactivity/events/index.js

@@ -1,63 +1,12 @@
-import { useClickEvent } from "./click.js";
-import {usePointerEvent} from "./pointer.js";
-import {useMouseEvent} from "./mouse.js";
-import {useWheelEvent} from "./wheel.js";
-import {useKeyEvent} from "./key.js";
-import {useDragEvent,useDropEvent} from "./drag.js";
-import {useClipboardEvent} from "./clipboard.js";
-import {useFocusEvent} from "./focus.js";
-import {useInputEvent} from "./Input.js";
-import {useHashEvent} from "./hash.js";
-import {useCustomEvent} from "./custom-event.js";
-import {useSwipeEvent} from "./swipe.js"
-const Events={
-    usePointerEvent,
-    useMouseEvent,
-    useWheelEvent,
-    useKeyEvent,
-    useDragEvent,
-    useDropEvent,
-    useClickEvent,
-    useClipboardEvent,
-    useFocusEvent,
-    useInputEvent,
-    useHashEvent,
-    useCustomEvent,
-    useSwipeEvent,
-    ExtractAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'ExtractAll' && key !== 'RemoveAll') {
-                globalThis[key] = this[key];
-            }
-        }
-        return this;
-    },
-    RemoveAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'RemoveAll') {
-                delete globalThis[key];
-            }
-        }
-        return this;
-    }
-}
-export {
-    usePointerEvent,
-    useMouseEvent,
-    useWheelEvent,
-    useKeyEvent,
-    useDragEvent,
-    useDropEvent,
-    useClickEvent,
-    useClipboardEvent,
-    useFocusEvent,
-    useInputEvent,
-    useHashEvent,
-    useCustomEvent,
-    useSwipeEvent
-}
-export default Events
+export * from "./click.js";
+export * from "./pointer.js";
+export * from "./mouse.js";
+export * from "./wheel.js";
+export * from "./key.js";
+export * from "./drag.js";
+export * from "./clipboard.js";
+export * from "./focus.js";
+export * from "./Input.js";
+export * from "./hash.js";
+export * from "./custom-event.js";
+export * from "./swipe.js"

src/reactivity/hooks/UI/index.js

@@ -2,4 +2,5 @@ export * from "./useStyle";
 export * from "./useTheme";
 // export * from "../Head/useTitle";
 // export * from "../Head/useFavIcon";
-export * from "./useMediaQuery"
+export * from "./useMediaQuery"
+export * from "./useRoot.js"

src/reactivity/hooks/UI/useRoot.js

@@ -0,0 +1,39 @@
+import { Str } from "../../../data"
+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{
+    ZikoUseRoot,
+    useRoot,
+    useRootValue,
+    // useRootStaticValue
+}

src/reactivity/hooks/index.js

@@ -1,91 +1,8 @@
-import {
-    useTitle,
-    useFavIcon,
-    useMeta,
-    useHead
-} from "./Head"
-import { 
-    useStyle,
-    useTheme,
-    useMediaQuery
- } from "./UI";
-import { 
-    useEventEmitter,
-    useChannel,
-    useThread,
-    useBluetooth
- } from "./Interactions";
-import { 
-    useBattery,
-    useGeolocation
- } from "./Sensors";
-import { 
-    useThrottle,
-    useDebounce
- } from "./Decorators";
-import {
-    useLocaleStorage,
-    useSessionStorage
-} from "./Storage"
-import { 
-    useSuccesifKeys
- } from "./Contexte";
-const Hooks={
-    useStyle,
-    useTheme,
-    useMediaQuery,
-    useBattery,
-    useGeolocation,
-    useEventEmitter,
-    useChannel,
-    useThread,
-    useBluetooth,
-    useTitle,
-    useFavIcon,
-    useMeta,
-    useHead,
-    useThrottle,
-    useDebounce,
-    useLocaleStorage,
-    useSessionStorage,
-    useSuccesifKeys,
-    ExtractAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'ExtractAll' && key !== 'RemoveAll') {
-                globalThis[key] = this[key];
-            }
-        }
-        return this;
-    },
-    RemoveAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'RemoveAll') {
-                delete globalThis[key];
-            }
-        }
-        return this;
-    }
-}
-export default Hooks;
-export{
-    useStyle,
-    useTheme,
-    useMediaQuery,
-    useTitle,
-    useFavIcon,
-    useBattery,
-    useGeolocation,
-    useEventEmitter,
-    useChannel,
-    useThread,
-    useBluetooth,
-    useThrottle,
-    useDebounce,
-    useLocaleStorage,
-    useSessionStorage,
-    useSuccesifKeys
-}
+export * from "./contexte"
+export * from "./decorators"
+export * from "./head"
+export * from "./interactions"
+export * from "./sensors"
+export * from "./storage"
+export * from "./ui"
+// export * from "./window"

src/reactivity/index.js

@@ -1,6 +1,6 @@
-import Events from "./events";
+import * as Events from "./events";
 import * as Observer from "./observer"
-import Hooks from "./hooks"
+import * as Hooks from "./hooks"
 const Reactivity={
     ...Events,
     ...Observer,