ziko 0.0.1

package/src/Reactivity/Use/Interactions/useChannel.js

@@ -0,0 +1,50 @@
+import { Random } from "../../../Math/Random";
+class ZikoUseChannel{
+    constructor(name=""){
+        this.channel=new BroadcastChannel(name);
+        this.EVENTS_DATAS_PAIRS=new Map();
+        this.EVENTS_HANDLERS_PAIRS=new Map();
+        this.LAST_RECEIVED_EVENT="";
+        this.UUID="ziko-channel"+Random.string(10);
+        this.SUBSCRIBERS=new Set([this.UUID]);
+    }
+    get broadcast(){
+        // update receiver
+        return this;
+    }
+    emit(event, data){
+        this.EVENTS_DATAS_PAIRS.set(event,data)
+        this.#maintainEmit(event);
+        return this;
+    }
+    on(event,handler=console.log){
+        this.EVENTS_HANDLERS_PAIRS.set(event,handler);
+        this.#maintainOn()
+        return this;
+    }
+    #maintainOn(){
+        this.channel.onmessage = (e) => {
+            this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
+            const USER_ID=e.data.userId;
+            this.SUBSCRIBERS.add(USER_ID)
+            const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT)
+            const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT)
+            if(Data && Handler)Handler(Data)
+          };
+          return this;
+    }
+    #maintainEmit(event){
+        this.channel.postMessage({
+            EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
+            last_sended_event:event,
+            userId:this.UUID
+        });
+        return this;
+    }
+    close(){
+        this.channel.close();
+        return this;
+    }
+}
+const useChannel=name=>new ZikoUseChannel(name);
+export{ useChannel }

package/src/Reactivity/Use/Interactions/useEventEmmiter.js

@@ -0,0 +1,64 @@
+class ZikoUseEventEmitter {
+    constructor() {
+      this.events = {};
+      this.maxListeners = 10; 
+    }
+    on(event, listener) {
+      if (!this.events[event]) {
+        this.events[event] = [];
+      }
+      this.events[event].push(listener);  
+      if (this.events[event].length > this.maxListeners) {
+        console.warn(`Warning: Possible memory leak. Event '${event}' has more than ${this.maxListeners} listeners.`);
+      }
+    }
+    once(event, listener) {
+      const onceListener = (data) => {
+        this.off(event, onceListener); // Remove the listener after it's been called
+        listener(data);
+      };
+      this.on(event, onceListener);
+    }
+  
+    off(event, listener) {
+      const listeners = this.events[event];
+      if (listeners) {
+        const index = listeners.indexOf(listener);
+        if (index !== -1) {
+          listeners.splice(index, 1);
+        }
+      }
+    }
+  
+    emit(event, data) {
+      const listeners = this.events[event];
+      if (listeners) {
+        listeners.forEach(listener => {
+          listener(data);
+        });
+      }
+    }
+  
+    clear(event) {
+      if (event) {
+        delete this.events[event];
+      } else {
+        this.events = {};
+      }
+    }
+  
+    setMaxListener(event, max) {
+      this.maxListeners = max;
+    }
+  
+    removeAllListeners(event) {
+      if (event) {
+        this.events[event] = [];
+      } else {
+        this.events = {};
+      }
+    }
+  }
+
+const useEventEmitter=()=>new ZikoUseEventEmitter()
+export{useEventEmitter}

package/src/Reactivity/Use/Interactions/useThread.js

@@ -0,0 +1,44 @@
+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;
+}
+
+export { useThread };

package/src/Reactivity/Use/Sensors/index.js

@@ -0,0 +1,2 @@
+export * from "./useBattery";
+export * from "./useGeolocation"

package/src/Reactivity/Use/Sensors/useBattery.js

@@ -0,0 +1,36 @@
+class ZikoUseBattery{
+    constructor(){
+        if(this.isSupported)this.#init();
+    }   
+    async #init(){
+        this.__Battery__=await navigator.getBattery(); 
+    }
+    get isSupported(){
+        return !!navigator.getBattery;
+    }
+    get current(){
+        // Synchrouns Code
+        const {
+            level,
+            charging,
+            chargingTime,
+            dischargingTime
+        }=this.__Battery__;
+        return{
+            level,
+            charging,
+            chargingTime,
+            dischargingTime
+        }
+    }
+    onChargingChange(callback){
+        this.__Battery__.addEventListener("chargingchange",callback);
+        return this;
+    }
+    onLevelChange(callback){
+        this.__Battery__.addEventListener("levelchange",callback);
+        return this;
+    }
+}
+const useBattery=()=>new ZikoUseBattery();
+export{ useBattery }

package/src/Reactivity/Use/Sensors/useGeolocation.js

@@ -0,0 +1,17 @@
+class ZikoUseGeolocation{
+    constructor(){
+        if(this.isSupported)this.#init();
+    }   
+    async #init(){
+        navigator.geolocation.getCurrentPosition(e=>this.__Geolocation__=e)
+    }
+    get isSupported(){
+        return !!navigator.geolocation;
+    }
+    get current(){
+        // Synchrouns Code
+        return this.__Geolocation__;
+    }
+}
+const useGeolocation=()=>new ZikoUseGeolocation();
+export{ useGeolocation }

package/src/Reactivity/Use/Storage/index.js

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

package/src/Reactivity/Use/Storage/useStorage.js

@@ -0,0 +1,74 @@
+// To do : remove old items
+import { useChannel } from "../Interactions";
+class ZikoUseStorage{
+    #CACHE
+    constructor(storage,globalKey,initialValue){
+        this.#CACHE={
+            storage,
+            globalKey,
+            channel:useChannel(`Ziko:useStorage-${globalKey}`),
+            oldItemKeys:new Set()
+        }
+        this.#init(initialValue);
+        this.#maintain();
+    }
+    get items(){
+        return JSON.parse(this.#CACHE.storage[this.#CACHE.globalKey]??null);
+    }
+    #maintain() {
+        for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
+    }
+    #init(initialValue){
+        this.#CACHE.channel=useChannel(`Ziko:useStorage-${this.#CACHE.globalKey}`);
+        this.#CACHE.channel.on("Ziko-Storage-Updated",()=>this.#maintain());
+        if(!initialValue)return;
+        if(this.#CACHE.storage[this.#CACHE.globalKey]){
+            Object.keys(this.items).forEach(key=>this.#CACHE.oldItemKeys.add(key));
+            console.group("Ziko:useStorage")
+            console.warn(`Storage key '${this.#CACHE.globalKey}' already exists. we will not overwrite it.`);
+            console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
+            console.group("")
+        }
+        else this.set(initialValue);
+    }
+    set(data){
+        this.#CACHE.storage.setItem(this.#CACHE.globalKey,JSON.stringify(data));
+        this.#CACHE.channel.emit("Ziko-Storage-Updated",{});
+        Object.keys(data).forEach(key=>this.#CACHE.oldItemKeys.add(key));
+        this.#maintain();
+        return this
+    }
+    add(data){
+        const db={
+            ...this.items,
+            ...data
+        }
+        this.#CACHE.storage.setItem(this.#CACHE.globalKey,JSON.stringify(db));
+        this.#maintain();
+        return this;
+    }
+    remove(...keys){
+        const db={...this.items};
+        for(let i=0;i<keys.length;i++){
+            delete db[keys[i]];
+            delete this[keys[i]];
+        }
+        this.set(db);
+        return this;
+    }
+    get(key){
+        return this.items[key];
+    }
+    clear(){
+        this.#CACHE.storage.removeItem(this.#CACHE.globalKey);
+        this.#maintain();
+        return this;
+    }
+
+}
+const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
+const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
+export{
+    useLocaleStorage,
+    useSessionStorage
+}

package/src/Reactivity/Use/UI/index.js

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

package/src/Reactivity/Use/UI/useCssText.js

@@ -0,0 +1,21 @@
+class ZikoUseCssText{
+    constructor(css){
+        this.#init();
+        this.set(css);
+    }
+    #init(){     
+        // this.__FavIcon__=document.querySelector("link[rel*='icon']") || document.createElement('link');   
+        // this.__FavIcon__.type = 'image/x-icon';
+        // this.__FavIcon__.rel = 'shortcut icon';
+        return this;
+    }
+    set(cssText){
+        // if(href!==this.__FavIcon__.href){
+        //     this.__FavIcon__.href=href;
+        //     if(this.cache.Emitter)this.cache.Emitter.emit("ziko:favicon-changed");
+        // }
+        return this;
+    }
+}
+const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
+export{ useFavIcon }

package/src/Reactivity/Use/UI/useFavIcon.js

@@ -0,0 +1,38 @@
+import { useEventEmitter } from "../Interactions/useEventEmmiter";
+class ZikoUseFavIcon{
+    constructor(FavIcon,useEventEmitter=true){
+        this.#init();
+        this.cache={
+            Emitter:null
+        }
+        if(useEventEmitter)this.useEventEmitter();
+        this.set(FavIcon);
+    }
+    #init(){     
+        this.__FavIcon__=document.querySelector("link[rel*='icon']") || document.createElement('link');   
+        this.__FavIcon__.type = 'image/x-icon';
+        this.__FavIcon__.rel = 'shortcut icon';
+        return this;
+    }
+    set(href){
+        if(href!==this.__FavIcon__.href){
+            this.__FavIcon__.href=href;
+            if(this.cache.Emitter)this.cache.Emitter.emit("ziko:favicon-changed");
+        }
+        return this;
+    }
+    get current(){
+        return document.__FavIcon__.href;
+    }
+    onChange(callback){
+        if(this.cache.Emitter)this.cache.Emitter.on("ziko:favicon-changed",callback);
+        return this;
+    }
+    useEventEmitter(){
+        this.cache.Emitter=useEventEmitter();
+        return this;
+    }
+
+}
+const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
+export{ useFavIcon }

package/src/Reactivity/Use/UI/useMediaQuery.js

@@ -0,0 +1 @@
+//window.matchMedia('(max-width: 600px)');

package/src/Reactivity/Use/UI/useStyle.js

@@ -0,0 +1,54 @@
+class ZikoUseStyle{
+    constructor(style,id=0){
+      this.id="Ziko-Style-"+id;
+      this.use(style);
+      this.keys=new Set();
+      this.styles={
+        default:{
+          fontSize:"1em"
+        }
+      }
+    }
+    get current(){
+      return [...this.keys].reduce((key, value) => {
+        key[value] = `var(--${value}-${this.id})`;
+        return key;
+      }, {});
+    }
+    add(name,style={}){
+      if(name instanceof Object)Object.assign(this.styles,name)
+      else Object.assign(this.styles,{[name]:style});
+      return this;
+    }
+    #useStyleIndex(index){
+      const keys=Object.keys(this.styles);
+        for(let a in this.styles[keys[index]]){
+          document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[keys[index]][a]);
+          this.keys.add(a);
+        }
+
+        return this;
+    }
+    #useStyleName(name){
+      for(let a in this.styles[name]){
+        document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[name][a]);
+        this.keys.add(a);
+      }
+      return this;
+    }
+    #useStyleObject(Style){
+      for(let a in Style){
+        document.documentElement.style.setProperty(`--${a}-${this.id}`, Style[a]);
+        this.keys.add(a);
+      }
+      return this;
+    }
+    use(style){
+      if(typeof style === "number")this.#useStyleIndex(style);
+      if(typeof style === "string")this.#useStyleName(style);
+      if(style instanceof Object)this.#useStyleObject(style);
+      return this;
+    }
+  }  
+const useStyle=id=>style=>new ZikoUseStyle(style,id)
+export {useStyle}

package/src/Reactivity/Use/UI/useTheme.js

@@ -0,0 +1,62 @@
+import { Themes } from "../../../App/Themes";
+class ZikoUseTheme{
+    constructor(theme,id=0){
+      this.id="Ziko-Theme-"+id;
+      this.use(theme)
+    }
+    get current(){
+      const colorNames = [
+        'background',
+        'currentLine',
+        'selection',
+        'foreground',
+        'comment',
+        'cyan',
+        'green',
+        'orange',
+        'pink',
+        'purple',
+        'red',
+        'yellow',
+    ];
+    return colorNames.reduce((theme, color) => {
+        theme[color] = `var(--${color}-${this.id})`;
+        return theme;
+    }, {});
+  
+  }
+    useThemeIndex(index){
+      const keys=Object.keys(Themes);
+          for(let a in Themes[keys[index]]){
+              document.documentElement.style.setProperty(`--${a}-${this.id}`, Themes[keys[index]][a]);
+          }
+          return this;
+    }
+    useThemeName(str){
+      str=str.toLowerCase()
+      const Themes_With_Lower_Case=Object.fromEntries(Object.entries(Themes).map(n=>[n[0].toLowerCase(),n[1]]))
+          for(let a in Themes_With_Lower_Case[str]){
+              document.documentElement.style.setProperty(`--${a}-${this.id}`, Themes_With_Lower_Case[str][a]);
+          }
+          return this;
+    }
+    useThemeObject(Theme){
+      for(let a in Theme){
+        document.documentElement.style.setProperty(`--${a}-${this.id}`, Theme[a]);
+      }
+      return this;
+    }
+    use(theme){
+      if(typeof theme === "number")this.useThemeIndex(theme);
+      if(typeof theme === "string")this.useThemeName(theme);
+      if(theme instanceof Object)this.useThemeObject(theme);
+      return this;
+    }
+  }  
+  const useTheme=(id=0)=>(theme=0)=>new ZikoUseTheme(theme,id)
+  export {
+      useTheme,
+      // Themes,
+      // LightThemes,
+      // DarkThemes,
+  };

package/src/Reactivity/Use/UI/useTitle.js

@@ -0,0 +1,30 @@
+import { useEventEmitter } from "../Interactions/useEventEmmiter";
+class ZikoUseTitle{
+    constructor(title=document.title,useEventEmitter=true){
+        this.cache={
+            Emitter:null
+        }
+        if(useEventEmitter)this.useEventEmitter();
+        this.set(title);
+    }
+    useEventEmitter(){
+        this.cache.Emitter=useEventEmitter();
+        return this;
+    }
+    set(title){
+        if(title!==document.title){
+            document.title=title;
+            if(this.cache.Emitter)this.cache.Emitter.emit("ziko:title-changed");
+        }
+        return this;
+    }
+    get current(){
+        return document.title;
+    }
+    onChange(callback){
+        if(this.cache.Emitter)this.cache.Emitter.on("ziko:title-changed",callback);
+        return this;
+    }
+}
+const useTitle=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
+export{ useTitle }

package/src/Reactivity/Use/index.js

@@ -0,0 +1,82 @@
+import { 
+    useStyle,
+    useTheme,
+    useTitle,
+    useFavIcon
+ } 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 Use={
+    useStyle,
+    useTheme,
+    useBattery,
+    useGeolocation,
+    useEventEmitter,
+    useChannel,
+    useThread,
+    useBluetooth,
+    useTitle,
+    useFavIcon,
+    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 Use;
+export{
+    useStyle,
+    useTheme,
+    useTitle,
+    useFavIcon,
+    useBattery,
+    useGeolocation,
+    useEventEmitter,
+    useChannel,
+    useThread,
+    useBluetooth,
+    useThrottle,
+    useDebounce,
+    useLocaleStorage,
+    useSessionStorage,
+    useSuccesifKeys
+}

package/src/Reactivity/Use/todo.md

@@ -0,0 +1,26 @@
+- Device :
+  - useBattery
+  - useGeolocation
+  - useFullScrean
+  - useOrientation
+  - useNotification
+- UI
+  - useTheme
+  - useStyle 
+  - useCss
+  - useTitle
+  - useFavIcon
+- Interactions
+  - useEventEmitter
+  - useChannel
+  - useBluetooth
+  - useSerial
+  - useUsb
+  - useSocket
+- Storage
+  - useSessionStorage
+  - useLocalStorage
+- Timing
+  - useDebounce
+  - useThrottle
+

package/src/Reactivity/index.js

@@ -0,0 +1,3 @@
+export * from "./Events";
+export * from "./Observer";
+export * from "./Use";