ziko 0.0.18 → 0.0.20

package/src/reactivity/hooks/{ui → UI}/useStyle.js

@@ -1,79 +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
- };
+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 → UI}/useTheme.js

@@ -1,62 +1,62 @@
-import { Themes } from "../../../global/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,
+import { Themes } from "../../../global/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/index.js

@@ -1,8 +1,8 @@
-export * from "./contexte"
-export * from "./decorators"
-export * from "./head"
-export * from "./interactions"
-export * from "./sensors"
-export * from "./storage"
-export * from "./ui"
+export * from "./contexte"
+export * from "./decorators"
+export * from "./head"
+export * from "./interactions"
+export * from "./sensors"
+export * from "./storage"
+export * from "./ui"
 // export * from "./window"

package/src/reactivity/hooks/todo.md

@@ -1,26 +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
-
+- 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

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

package/src/reactivity/index.js

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

package/src/reactivity/observer/attributes.js

@@ -1,28 +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
-}
-
+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

@@ -1,37 +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
+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

@@ -1,6 +1,6 @@
-export * from "./attributes.js"
-export * from "./children.js";
-export * from "./intersection.js";
-export * from "./mutation.js";
-export * from "./resize.js";
-export * from "./screen.js"
+export * from "./attributes.js"
+export * from "./children.js";
+export * from "./intersection.js";
+export * from "./mutation.js";
+export * from "./resize.js";
+export * from "./screen.js"

package/src/reactivity/observer/intersection.js

@@ -1,44 +1,44 @@
-class ZikoIntersectionObserver{
-    constructor(UIElement,callback,{threshold=0,margin=0}={}){
-        this.target=UIElement;
-        this.config={
-            threshold,
-            margin
-        }
-        if(!globalThis.IntersectionObserver){
-            console.log("IntersectionObserver Not 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);
+class ZikoIntersectionObserver{
+    constructor(UIElement,callback,{threshold=0,margin=0}={}){
+        this.target=UIElement;
+        this.config={
+            threshold,
+            margin
+        }
+        if(!globalThis.IntersectionObserver){
+            console.log("IntersectionObserver Not 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}