ziko 0.65.0 → 0.67.0

package/src/--reactivity-deprecated/events/swipe.js

@@ -1,149 +0,0 @@
-import { ZikoEvent, EVENT_CONTROLLER } from "./ZikoEvent.js";
-import { norm, lerp, abs, sign } from "../../math/index.js";
-class ZikoEventSwipe extends ZikoEvent {
-  constructor(target, width_threshold = 0.3, height_threshold = 0.3) {
-    super(target);
-    const { removeListener, setWidthThreshold, setHeightThreshold } = init_swipe_event_handler(
-      this.target?.element,
-      width_threshold,
-      height_threshold,
-      this.target.width,
-      this.target.height,
-    );
-    this.cache = {
-      width_threshold,
-      height_threshold,
-      removeListener,
-      setWidthThreshold,
-      setHeightThreshold,
-      legacyTouchAction : globalThis?.document?.body?.style?.touchAction,
-      prefixe: "",
-      preventDefault: {
-        swipe: false,
-      },
-      paused: {
-        swipe: false,
-      },
-      stream: {
-        enabled: {
-          swipe: false,
-        },
-        clear: {
-          swipe: false,
-        },
-        history: {
-          swipe: [],
-        },
-      },
-      callbacks: {
-        swipe: [],
-      },
-    };
-    this.__controller = {
-      swipe: swipe_controller.bind(this),
-    };
-  }
-  onSwipe(...callbacks) {
-    Object.assign(globalThis?.document?.body?.style,{touchAction:"none"})
-    this.__onEvent("swipe", {}, ...callbacks);
-    return this;
-  }
-  updateThresholds(width_threshold = this.cache.width_threshold, height_threshold = this.cache.height_threshold) {
-    if (width_threshold !== undefined) {
-      this.cache.setWidthThreshold(width_threshold);
-    }
-    if (height_threshold !== undefined) {
-      this.cache.setHeightThreshold(height_threshold);
-    }
-    return this;
-  }
-  destroy() {
-    this.cache.removeListener();
-    Object.assign(globalThis?.document?.body?.style,{touchAction:this.cache.legacyTouchAction})
-    return this;
-  }
-}
-function init_swipe_event_handler(element, width_threshold = 0.50, height_threshold = 0.5, width, height) {
-  let Interpolated_width_threshold = lerp(width_threshold, 0, width);
-  let Interpolated_height_threshold = lerp(height_threshold, 0, height);
-  let startX = 0, startY = 0, endX = 0, endY = 0;
-  const pointerDownHandler = (event) => {
-    startX = event.clientX;
-    startY = event.clientY;
-  };
-  const pointerUpHandler = (event) => {
-    endX = event.clientX;
-    endY = event.clientY;
-    handleSwipe();
-  };
-  element?.addEventListener('pointerdown', pointerDownHandler);
-  element?.addEventListener('pointerup', pointerUpHandler);
-  function handleSwipe() {
-    const deltaX = endX - startX;
-    const deltaY = endY - startY;
-    if (Math.abs(deltaX) > Interpolated_width_threshold || Math.abs(deltaY) > Interpolated_height_threshold) {
-      dispatchSwipeEvent(deltaX, deltaY);
-    }
-  }
-  function dispatchSwipeEvent(deltaX, deltaY) {
-    const event = globalThis?.CustomEvent ? new CustomEvent('swipe', {
-      detail: {
-        deltaX: abs(deltaX) < Interpolated_width_threshold ? 0 : sign(deltaX) * norm(abs(deltaX), 0, width),
-        deltaY: abs(deltaY) < Interpolated_height_threshold ? 0 : sign(deltaY) * norm(abs(deltaY), 0, height),
-        direction: {
-          x : abs(deltaX) < Interpolated_width_threshold ? "none" : deltaX > 0 ? "right" : "left",
-          y : abs(deltaY) < Interpolated_height_threshold ? "none" : deltaY > 0 ? 'down' : 'up',
-        },
-      },
-    }) : null;
-    element?.dispatchEvent(event);
-  }
-  function setWidthThreshold(new_width_threshold) {
-    Interpolated_width_threshold = lerp(new_width_threshold, 0, width);
-  }
-  function setHeightThreshold(new_height_threshold) {
-    Interpolated_height_threshold = lerp(new_height_threshold, 0, height);
-  }
-  return {
-    removeListener() {
-      element?.removeEventListener('pointerdown', pointerDownHandler);
-      element?.removeEventListener('pointerup', pointerUpHandler);
-      console.log('Swipe event listeners removed');
-    },
-    setWidthThreshold,
-    setHeightThreshold,
-  };
-}
-function swipe_controller(e) {
-  EVENT_CONTROLLER.call(this, e, "swipe", null, null);
-}
-const useSwipeEvent = (target, width_threshold, height_threshold) => new ZikoEventSwipe(target, width_threshold, height_threshold);
-export{
-  useSwipeEvent,
-  ZikoEventSwipe
-}
-/*
-a=p("ALLL").size("300px","300px").style({background:"red",userSelect:"none"})
-t=text("")
-ev=useSwipeEvent(a, .1, .3)
-ev.onSwipe(e=>{
-// t.setValue(`
-//  vertical direction : ${e.event.detail.direction.y}
-//  horizontal direction : ${e.event.detail.direction.x}
-//  deltaX : ${e.event.detail.deltaX}
-//  deltaY : ${e.event.detail.deltaY}
-// `)
-e.target.st.translate(e.event.detail.deltaX * 200, e.event.detail.deltaY * 200,0, 500)
-})
-*/
-/*
-a=p("ALLL")
-.size("300px","300px")
-.style({background:"red",userSelect:"none"})
-.onSwipe(
-.3,
-.3,
-e=>{
-  e.target.st.translate(e.event.detail.deltaX * 200, e.event.detail.deltaY * 200,0, 500)
-})
-*/

package/src/--reactivity-deprecated/hooks/Contexte/index.js

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

package/src/--reactivity-deprecated/hooks/Contexte/useSuccesifKeys.js

@@ -1,14 +0,0 @@
-const useSuccesifKeys=(self,keys=[],callback=()=>{})=>{
-    self.cache.stream.enabled.down=true;
-    const length=keys.length;
-    const LastKeysDown=self.cache.stream.history.down.slice(-length).map(n=>n.key);
-    
-        if(keys.join("")===LastKeysDown.join("")){
-            self.event.preventDefault();
-            callback.call(self,self);
-        }
-    
-}
-export {
-    useSuccesifKeys
-}

package/src/--reactivity-deprecated/hooks/UI/index.js

@@ -1,6 +0,0 @@
-// export * from "./useStyle.js";
-// export * from "./useTheme";
-// export * from "../Head/useTitle";
-// export * from "../Head/useFavIcon";
-export * from "./useMediaQuery.js"
-// export * from "./useRoot.js"

package/src/--reactivity-deprecated/hooks/UI/useMediaQuery.js

@@ -1,43 +0,0 @@
-/*
- [
-            {
-                query: '(min-width: 600px)',
-                callback: () => console.log(1)
-            },
-            {
-                query: '(max-width: 300px)',
-                callback: () => console.log(2)
-            }
-        ]
-*/
-class UseMediaQuery {
-    constructor(mediaQueryRules=[],fallback=()=>{}) {
-        this.mediaQueryRules = mediaQueryRules;
-        this.fallback = fallback;
-        this.lastCalledCallback = null;
-        this.init();
-    }
-
-    init() {
-        this.mediaQueryRules.forEach(({ query, callback }) => {
-            const mediaQueryList = globalThis.matchMedia(query);
-            const checkMatches = () => {
-                const anyMatch = this.mediaQueryRules.some(({ query }) => globalThis.matchMedia(query).matches);
-                if (mediaQueryList.matches) {
-                    callback();
-                    this.lastCalledCallback = callback;
-                } else if (!anyMatch && this.lastCalledCallback !== this.fallback) {
-                    this.fallback();
-                    this.lastCalledCallback = this.fallback;
-                }
-            };
-            checkMatches()
-            mediaQueryList.addListener(checkMatches);
-        });
-    }
-}
-
-const useMediaQuery = (mediaQueryRules,fallback) => new UseMediaQuery(mediaQueryRules,fallback);
-export {
-    useMediaQuery
-};

package/src/--reactivity-deprecated/hooks/UI/useRoot.js

@@ -1,39 +0,0 @@
-import { camel2hyphencase } from "../../../data/converter/string/index.js";
-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 = `--${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 = `--${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
-}

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

@@ -1,79 +0,0 @@
-class UseStyle {
-  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 UseStyle(styles, use, id)
-export { 
-  useStyle,
-  UseStyle
- };

package/src/--reactivity-deprecated/hooks/UI/useTheme.js

@@ -1,62 +0,0 @@
-import { Themes } from "../../../global/themes";
-class UseTheme{
-    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 UseTheme(theme,id)
-  export {
-      useTheme,
-      // Themes,
-      // LightThemes,
-      // DarkThemes,
-  };

package/src/--reactivity-deprecated/hooks/head/_useCssText.js

@@ -1,21 +0,0 @@
-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 useCss=(FavIcon,useEventEmitter)=>new ZikoUseCssText(FavIcon,useEventEmitter);
-export{ useCss }

package/src/--reactivity-deprecated/hooks/head/index.js

@@ -1,5 +0,0 @@
-// export * from "./useCssText"
-export * from "./useFavIcon"
-export * from "./useMeta";
-export * from "./useTitle";
-export * from "./useHead"

package/src/--reactivity-deprecated/hooks/head/useFavIcon.js

@@ -1,38 +0,0 @@
-import { useEventEmitter } from "../../../hooks/use-event-emitter.js";
-class ZikoUseFavIcon{
-    constructor(FavIcon,withEmitter=true){
-        this.#init();
-        this.cache={
-            Emitter:null
-        }
-        if(withEmitter)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,withEmitter)=>new ZikoUseFavIcon(FavIcon,withEmitter);
-export{ useFavIcon }

package/src/--reactivity-deprecated/hooks/head/useHead.js

@@ -1,28 +0,0 @@
-import { useTitle } from "./useTitle.js";
-import { useFavIcon } from "./useFavIcon.js";
-import {useMeta} from "./useMeta.js";
-// import {useLink} from "./";
-class ZikoHead{
-    constructor({title,lang,icon,meta,noscript}){
-        this.html = globalThis?.document?.documentElement;
-        this.head = globalThis?.document?.head;
-
-        title && useTitle(title);
-        lang && this.setLang(lang)
-        icon && useFavIcon(icon);
-        meta && useMeta(meta);
-        noscript && this.setNoScript()
-    }
-    setLang(lang){
-        this.html.setAttribute("lang",lang)
-    }
-    setNoScript(content){
-
-    }
-}
-
-const useHead=({ title, lang, icon, meta, noscript })=>new ZikoHead({ title, lang, icon, meta, noscript });
-export{
-    useHead,
-    ZikoHead
-}

package/src/--reactivity-deprecated/hooks/head/useMeta.js

@@ -1,52 +0,0 @@
-class ZikoMeta{
-    constructor({viewport,charset,description,author,keywords}){
-        this.document = globalThis?.document 
-        this.meta={};
-        this.init({viewport,charset,description,author,keywords})
-    }
-    init({viewport,charset,description,author,keywords}){
-        viewport && this.setViewport(viewport);
-        charset && this.setCharset(charset);
-        description && this.describe(description);
-        author && this.setAuthor(author);
-        keywords && this.setKeywords(keywords);
-    }
-    set(key,value){
-        key = key.toLowerCase();
-        const isCharset = (key === "charset")
-        const meta = isCharset ? document.querySelector("meta[charset]"):document.querySelector(`meta[name=${key}]`);
-        this.meta=meta?? document?.createElement("meta");
-        if(isCharset) this.meta.setAttribute("charset",value);
-        else{
-            this.meta.setAttribute("name",key);
-            this.meta.setAttribute("content",value);
-        }
-        if(!meta)this.document.head.append(this.meta);
-        return this;     
-    }
-    setCharset(charset="utf-8"){
-        this.set("charset",charset)
-        return this;
-    }
-    describe(description){
-        this.set("description",description);
-        return this;    
-    }
-    setViewport(viewport="width=device-width, initial-scale=1.0"){
-        this.set("viewport",viewport);
-        return this;    
-    }
-    setKeywords(...keywords){
-        // keywords.push("zikojs");
-        keywords=[...new Set(keywords)].join(", ");
-        this.set("keywords",keywords);
-        return this;
-    }
-    setAuthor(author){
-        this.set("author",author);
-        return this;
-    }
-}
-const useMeta=({viewport,charset,description,author,keywords})=>new ZikoMeta({viewport,charset,description,author,keywords});
-export{useMeta}
-

package/src/--reactivity-deprecated/hooks/head/useTitle.js

@@ -1,30 +0,0 @@
-import { useEventEmitter } from "../../../hooks/use-event-emitter.js";
-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-deprecated/hooks/index.js

@@ -1,8 +0,0 @@
-// 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-deprecated/hooks/todo.md

@@ -1,26 +0,0 @@
-- 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-deprecated/idea

@@ -1 +0,0 @@
-useTypeWritter 

package/src/--reactivity-deprecated/index.js

@@ -1,3 +0,0 @@
-export * from "./events";
-export * from "./observer";
-// export * from "./hooks";

package/src/--reactivity-deprecated/observer/attributes.js

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