ziko 0.0.12 → 0.0.13

package/src/reactivity/hooks/UI/useStyle.js

@@ -0,0 +1,79 @@
+class ZikoUseStyle {
+  constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
+    this.id = "Ziko-Style-" + id;
+    this.keys = new Set();
+    this.styles = {
+      default: {
+        fontSize: "1em",
+        color : "green"
+      },
+      other: {
+        fontSize : "2em",
+        color : "cyan" 
+      }
+    };
+    style && this.add(style);
+    use && this.use(use);
+  }
+
+  get current() {
+    return [...this.keys].reduce((key, value) => {
+      key[value] = `var(--${value}-${this.id})`;
+      return key;
+    }, {});
+  }
+
+  add(name, style = {}) {
+    if (name && typeof name === 'object' && !Array.isArray(name)) {
+      Object.assign(this.styles, name);
+    } else if (typeof name === 'string') {
+      Object.assign(this.styles, { [name]: style });
+    }
+    return this;
+  }
+
+  #useStyleIndex(index) {
+    const keys = Object.keys(this.styles);
+    for (let a in this.styles[keys[index]]) {
+      if (Object.prototype.hasOwnProperty.call(this.styles[keys[index]], a)) {
+        document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[keys[index]][a]);
+        this.keys.add(a);
+      }
+    }
+    return this;
+  }
+
+  #useStyleName(name) {
+    if (!this.styles[name]) return this;
+    for (let a in this.styles[name]) {
+      if (Object.prototype.hasOwnProperty.call(this.styles[name], a)) {
+        document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[name][a]);
+        this.keys.add(a);
+      }
+    }
+    return this;
+  }
+
+  #useStyleObject(style) {
+    for (let a in style) {
+      if (Object.prototype.hasOwnProperty.call(style, a)) {
+        document.documentElement.style.setProperty(`--${a}-${this.id}`, style[a]);
+        this.keys.add(a);
+      }
+    }
+    return this;
+  }
+
+  use(style) {
+    if (typeof style === "number") return this.#useStyleIndex(style);
+    if (typeof style === "string") return this.#useStyleName(style);
+    if (style && typeof style === "object") return this.#useStyleObject(style);
+    return this;
+  }
+}
+
+const useStyle = (styles, use, id) => new ZikoUseStyle(styles, use, id)
+export { 
+  useStyle,
+  ZikoUseStyle
+ };

package/src/reactivity/hooks/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=(theme, id=0)=>new ZikoUseTheme(theme,id)
+  export {
+      useTheme,
+      // Themes,
+      // LightThemes,
+      // DarkThemes,
+  };

package/src/reactivity/hooks/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/hooks/index.js

@@ -0,0 +1,85 @@
+import { 
+    useStyle,
+    useTheme,
+    useTitle,
+    useFavIcon,
+    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,
+    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
+}

package/src/reactivity/hooks/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/idea

@@ -0,0 +1,2 @@
+useTypeWritter 
+useValueToggler

package/src/reactivity/index.js

@@ -0,0 +1,22 @@
+import Events from "./events";
+import Observer from "./observer"
+import Hooks from "./hooks"
+const Reactivity={
+    Events,
+    Observer,
+    Hooks,
+    ExtractAll: function () {
+        this.Events.ExtractAll();
+        this.Observer.ExtractAll();
+        this.Hooks.ExtractAll();
+    },
+    RemoveAll: function () {
+        this.Events.RemoveAll();
+        this.Observer.RemoveAll();
+        this.Hooks.RemoveAll();
+    }
+}
+export * from "./events";
+export * from "./observer";
+export * from "./hooks";
+export default Reactivity;

package/src/reactivity/observer/attributes.js

@@ -0,0 +1,28 @@
+import { ZikoMutationObserver } from "./mutation";
+class ZikoWatchAttr extends ZikoMutationObserver{
+    constructor(targetUIElement,callback){
+      super(targetUIElement,{ attributes: true, childList: false, subtree: false });
+      Object.assign(this.cache,{
+        observeCallback : (mutationsList, observer) =>{
+          for (const mutation of mutationsList) {
+            this.cache.lastMutation = {
+              name : mutation.attributeName,
+              value : mutation.target.getAttribute(mutation.attributeName)
+            }
+            if (this.cache.streamingEnabled) this.cache.mutationHistory.attributes.push(this.cache.lastMutation)
+        }
+        if (this.callback) this.callback(mutationsList, observer);  
+      }  
+      })
+      this.cache.mutationHistory.attributes = []
+      if(callback)this.observe(callback);
+    }
+    get history(){
+      return this.cache.mutationHistory.attributes;
+    }
+  }
+const watchAttr=(targetUIElement, callback)=>new ZikoWatchAttr(targetUIElement, callback);
+export{
+    watchAttr
+}
+

package/src/reactivity/observer/children.js

@@ -0,0 +1,37 @@
+import { ZikoMutationObserver } from "./mutation";
+class ZikoWatchChildren extends ZikoMutationObserver{
+    constructor(targetUIElement,callback){
+      super(targetUIElement,{ attributes: false, childList: true, subtree: false });
+      Object.assign(this.cache,{
+        observeCallback : (mutationsList, observer) =>{
+          for (const mutation of mutationsList) {
+            if(mutation.addedNodes)this.cache.lastMutation = {
+              type : "add",
+              item : this.target.find(n=>n.element === mutation.addedNodes[0])[0],
+              previous : this.target.find(n=>n.element === mutation.previousSibling)[0]
+            }
+            else if(mutation.addedNodes)this.cache.lastMutation = {
+              type : "remove",
+              item : this.target.find(n=>n.element === mutation.removedNodes[0])[0],
+              previous : this.target.find(n=>n.element === mutation.previousSibling)[0]
+            }
+            if (this.cache.streamingEnabled) this.cache.mutationHistory.children.push(this.cache.lastMutation)
+        }
+        if (this.callback) this.callback(mutationsList, observer);  
+      }  
+      })
+      this.cache.mutationHistory.children = []
+      if(callback)this.observe(callback);
+    }
+    get item(){
+      return this.cache.lastMutation.item;
+    }
+    get history(){
+      return this.cache.mutationHistory.children;
+    }
+  }
+
+const watchChildren=(targetUIElement, callback)=>new ZikoWatchChildren(targetUIElement, callback);
+export{
+    watchChildren
+}

package/src/reactivity/observer/index.js

@@ -0,0 +1,44 @@
+import { watchIntersection } from "./intersection.js";
+import { 
+    watch,
+    // watchAttr,
+    // watchChildren
+ } from "./mutation.js";
+import { watchSize } from "./resize.js";
+import { watchScreen } from "./screen.js";
+import { watchAttr } from "./attributes.js";
+import { watchChildren } from "./children.js";
+const Observer={
+    watch,
+    watchAttr,
+    watchChildren,
+    watchIntersection,
+    watchSize,
+    watchScreen,
+    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 * from "./intersection.js";
+export * from "./attributes.js";
+export * from "./children.js";
+export * from "./resize.js";
+export * from "./screen.js";
+export default Observer;

package/src/reactivity/observer/intersection.js

@@ -0,0 +1,44 @@
+class ZikoIntersectionObserver{
+    constructor(UIElement,callback,{threshold=0,margin=0}={}){
+        this.target=UIElement;
+        this.config={
+            threshold,
+            margin
+        }
+        if(!globalThis.IntersectionObserver){
+            console.log("IntersectionObserver Nor Supported")
+            return;
+        }
+        this.observer=new IntersectionObserver((entries)=>{
+            this.entrie=entries[0];
+            callback(this)
+        },{
+            threshold:this.threshold,
+        })
+    }
+    get ratio(){
+        return this.entrie.intersectionRatio;
+    }
+    get isIntersecting(){
+        return this.entrie.isIntersecting;
+    }
+    setThreshould(threshold){
+        this.config.threshold=threshold;
+        return this;
+    }
+    setMargin(margin){
+        margin=(typeof margin === "number")?margin+"px":margin;
+        this.config.margin=margin;
+        return this;
+    }
+    start(){
+        this.observer.observe(this.target.element);
+        return this;
+    }
+    stop(){
+        return this;
+    }
+}
+
+const watchIntersection=(UI,callback,config)=>new ZikoIntersectionObserver(UI,callback,config);
+export {watchIntersection}

package/src/reactivity/observer/mutation.js

@@ -0,0 +1,113 @@
+class ZikoMutationObserver {
+    constructor(targetUIElement, options) {
+      this.target = targetUIElement;
+      this.observer = null;
+      this.cache = {
+        options : options || { attributes: true, childList: true, subtree: true },
+        streamingEnabled : true,
+        lastMutation : null,
+        mutationHistory : {
+          // attributes: [],
+          // childList: [],
+          // subtree: [],
+        },
+      }
+  // children to Items : a.items.filter(n=>n.element === a[0].element)
+      this.observeCallback = (mutationsList, observer) => {
+        // if(this.cache.lastUpdatedAttr){
+        //   this.cache.lastUpdatedAttr = mutation.target.getAttribute(mutation.attributeName)
+        // }
+        if (this.cache.streamingEnabled) {
+          for (const mutation of mutationsList) {
+            switch(mutation.type){
+              case 'attributes':this.cache.mutationHistory.attributes.push(mutation.target.getAttribute(mutation.attributeName));break;
+              case 'childList':this.cache.mutationHistory.childList.push(mutation);break;
+              case 'subtree':this.cache.mutationHistory.subtree.push(mutation);break;
+            }
+          }
+        }
+        if (this.callback) {
+          this.callback(mutationsList, observer);
+        }
+      };
+    }
+  
+    observe(callback) {
+      if(!this.observer) {
+        if(!globalThis.MutationObserver) {
+          console.log("MutationObserver Nor Supported")
+          return;
+        }
+        this.observer = new MutationObserver(this.cache.observeCallback);
+        this.observer.observe(this.target.element, this.cache.options);
+        // this.callback = ([e]) => callback.call(e,this.target);
+        this.callback = ([e]) => callback.call(e, this);
+        this.cache.streamingEnabled = true;
+      }
+    }
+  
+    pause(options) {
+      if (this.observer) {
+        this.observer.disconnect();
+        if (options) {
+          this.observer.observe(this.target, options);
+        }
+      }
+    }
+  
+    reset(options) {
+      if (this.observer) {
+        this.observer.disconnect();
+        this.observer.observe(this.target, options || this.cache.options);
+      }
+    }
+  
+    clear() {
+      if (this.observer) {
+        this.observer.disconnect();
+        this.observer = null;
+        this.cache.mutationHistory = {
+          attributes: [],
+          childList: [],
+          subtree: [],
+        };
+      }
+      this.cache.streamingEnabled = false;
+      return this;
+    }
+  
+    getMutationHistory() {
+      return this.cache.mutationHistory;
+    }
+  
+    enableStreaming() {
+      this.cache.streamingEnabled = true;
+      return this;
+    }
+  
+    disableStreaming() {
+      this.cache.streamingEnabled = false;
+      return this;
+    }
+  }
+
+
+
+const watch=(targetUIElement,options={},callback=null)=>{
+    const Observer= new ZikoMutationObserver(targetUIElement,options);
+    if(callback)Observer.observe(callback);
+    return Observer
+}
+// const watchAttr = (targetUIElement, callback = null) => {
+//   const options = { attributes: true, childList: false, subtree: false };
+//   return watch(targetUIElement, options, ([e])=>callback.call(e,targetUIElement));
+// };
+// const watchAttr = (targetUIElement, callback = null) => {
+//   const options = { attributes: true, childList: false, subtree: false };
+//   return watch(targetUIElement, options, callback);
+// };
+
+export { 
+  ZikoMutationObserver,
+  watch,
+ }; 

package/src/reactivity/observer/resize.js

@@ -0,0 +1,47 @@
+class ZikoResizeObserver{
+    constructor(UIElement,callback){
+        this.target=UIElement;
+        this.contentRect=null;
+        this.observer=new ResizeObserver(()=>{
+           callback(this)
+        })
+    }
+    get BoundingRect(){
+        return this.target.element.getBoundingClientRect();
+    }
+    get width(){
+        return this.BoundingRect.width;
+    }
+    get height(){
+        return this.BoundingRect.height;
+    }
+    get top(){
+        return this.BoundingRect.top;
+    }
+    get bottom(){
+        return this.BoundingRect.bottom;
+    }
+    get right(){
+        return this.BoundingRect.right;
+    }
+    get left(){
+        return this.BoundingRect.left;
+    }
+    get x(){
+        return this.BoundingRect.x;
+    }
+    get y(){
+        return this.BoundingRect.y;
+    }
+    start(){
+        this.observer.observe(this.target.element);
+        return this;
+    }
+    stop(){
+        this.observer.unobserve(this.target.element);
+        return this;
+    }
+}
+
+const watchSize=(UI,callback)=>new ZikoResizeObserver(UI,callback)
+export {watchSize}

package/src/reactivity/observer/screen.js

@@ -0,0 +1,45 @@
+import { map } from "../../math/utils/index.js"
+class ZikoScreenObserver {
+    constructor(callback=e=>console.log({x:e.x,y:e.y})) {
+      this.cache={};
+      this.previousX = globalThis?.screenX;
+      this.previousY = globalThis?.screenY;
+    }
+    update(){
+        Object.assign(this.cache,{
+            screenXLeft : globalThis?.screenX, // CORRECT
+            screenXRight : globalThis?.screen.availWidth - globalThis?.screenX, // CORRECT
+            screenYTop : globalThis?.screenY, // CORRECT
+            screenYBottom : globalThis?.screen.availHeight - globalThis?.screenY - globalThis?.outerHeight, // TO TEST
+            screenCenterX : globalThis?.screen.availWidth/2, // CORRECT
+            screenCenterY : globalThis?.screen.availHeight/2,// CORRECT
+            windowCenterX : globalThis?.outerWidth/2+globalThis?.screenX, // CORRECT
+            windowCenterY : globalThis?.outerHeight/2+ globalThis?.screenY, // FALSE
+            deltaCenterX : globalThis?.screen.availWidth/2-globalThis?.outerWidth/2+globalThis?.screenX, // CORRECT
+            deltaCenterY : null //
+        })
+    }
+    get x0(){
+        return map(globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
+    }
+    get y0(){
+        return - map(globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
+    }
+    get x1(){
+        return map(globalThis?.screenX + globalThis?.outerWidth, 0, globalThis.screen.availWidth, -1, 1);
+    }
+    get y1(){
+        return - map(globalThis?.screenY + globalThis?.outerHeight, 0, globalThis.screen.availHeight, -1, 1);
+    }
+    get cx(){
+        return map(globalThis?.outerWidth/2+globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
+    }
+    get cy(){
+        return - map(globalThis?.outerHeight/2+ globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
+    }
+}
+
+const watchScreen=(callback)=>new ZikoScreenObserver(callback);
+export{
+    watchScreen
+}