ziko 0.65.0 → 0.67.0

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

@@ -1,37 +0,0 @@
-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-deprecated/observer/index.js

@@ -1,6 +0,0 @@
-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-deprecated/observer/intersection.js

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

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

@@ -1,113 +0,0 @@
-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-deprecated/observer/resize.js

@@ -1,47 +0,0 @@
-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-deprecated/observer/screen.js

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

package/src/--reactivity-deprecated/observer/screen.js.txt

@@ -1,84 +0,0 @@
-import { useTimeLoop } from "../../Time";
-import { 
-    map,
-    complex,
- } from "../../Math";
-class ZikoScreenObserver {
-    constructor(callback=e=>console.log({x:e.x,y:e.y})) {
-      this.previousX = globalThis?.screenX;
-      this.previousY = globalThis?.screenY;
-      this.view=[-1,-1,1,1];
-      this.start(callback);
-    }
-    get xMin(){
-        return this.view[0];
-    }
-    get yMin(){
-        return this.view[1];
-    }
-    get xMax(){
-        return this.view[2];
-    }
-    get yMax(){
-        return this.view[3];
-    }
-    get x(){
-        return globalThis?.screenX;
-    }
-    get y(){
-        return globalThis?.screenY;
-    }
-    get scx(){
-        return screen.availWidth/2;
-    }
-    get scy(){
-        return screen.availHeight/2;
-    }
-    get wcx(){
-        return screenX+globalThis?.innerWidth/2;
-    }
-    get wcx_v(){
-        return map(this.wcx,0,screen.availWidth,this.view[0],this.view[2]);
-    }
-    get wcy(){
-        return screenY+globalThis?.innerHeight/2;
-    }
-    get wcy_v(){
-        return -map(this.wcy,0,screen.availHeight,this.view[1],this.view[3]);
-    }
-    get dx(){
-        return map(this.x,0,screen.availWidth,this.xMin,this.xMax); 
-    }
-    get dy(){
-        return map(this.y,0,screen.availHeight,this.yMin,this.yMax); 
-    }
-    start(callback){
-        this.loop = useTimeLoop(()=>{
-            let currentX = globalThis?.screenX;
-            let currentY = globalThis?.screenY;
-            if (this.previousX !== currentX || this.previousY !== currentY) {
-                callback(this)
-                this.previousX = currentX;
-                this.previousY = currentY;
-            }
-        },1000/60,0,Infinity,true);
-        return this;
-    }
-}
-const watchScreen=(callback)=>new ZikoScreenObserver(callback);
-// globalThis.watchScreen=watchScreen;
-export{
-    watchScreen
-}
-
-/*
-a=ul("x","y","dx","dy","wcx","wxy")
-watchScreen(e=>{
- a[0].setValue("x : "+e.x) 
- a[1].setValue("y : "+e.y) 
- a[2].setValue("dx : "+e.dx) 
- a[3].setValue("dy : "+e.dy) 
- a[4].setValue("wCx : "+e.wcx) 
- a[5].setValue("wCy : "+e.wcy) 
-})
- */

package/src/--reactivity-deprecated/observer/screen.txt

@@ -1,13 +0,0 @@
-screenXLeft = screenX
-screenXRight = screen.availWidth - screenX
-
-screenYTop = screenY
-screenYBottom = screen.availHeight - screenY - outerHeight
-
-screenCenterX = screen.availWidth/2;
-screenCenterX = screen.availHeight/2;
-
-windowCenterX = outerWidth/2+screenX;
-windowCenterX = outerHeight/2+0;
-
-deltaCenterX = screenCenterX-windowCenterX

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

@@ -1,11 +0,0 @@
-// export * from './use-channel.js';
-// export * from './use-event-emmiter.js';
-export * from './use-thread.js';
-
-export * from './use-root.js';
-// export * from './use-title.js'
-export * from './use-favicon.js'
-// export * from './use-link.js'
-// export * from 'use-meta.js'
-
-// export * from './use-storage.js'

package/src/--use-deprecated/use-channel.js.txt

@@ -1,61 +0,0 @@
-import { Random } from "../math/random/index.js";
-
-class UseChannel {
-    constructor(name = "") {
-        this.channel = new BroadcastChannel(name);
-        this.eventData = new Map();
-        this.handlers = new Map();
-        this.uuid = "ziko-channel:" + Random.string(10);
-        this.subscribers = new Set([this.uuid]);
-
-        this.channel.addEventListener("message", (e) => {
-            const { last_sent_event, userId, eventData } = e.data;
-
-            // ignore own events
-            if (userId === this.uuid) return;
-
-            this.subscribers.add(userId);
-
-            // sync data
-            this.eventData = new Map(eventData);
-
-            const data = this.eventData.get(last_sent_event);
-            const handlers = this.handlers.get(last_sent_event);
-
-            if (handlers) {
-                handlers.forEach(fn => fn(data));
-            }
-        });
-    }
-
-    emit(event, data) {
-        this.eventData.set(event, data);
-
-        this.channel.postMessage({
-            eventData: this.eventData,
-            last_sent_event: event,
-            userId: this.uuid
-        });
-        return this;
-    }
-
-    on(event, handler = console.log) {
-        if (!this.handlers.has(event)) {
-            this.handlers.set(event, []);
-        }
-        this.handlers.get(event).push(handler);
-        return this;
-    }
-
-    close() {
-        this.channel.close();
-        return this;
-    }
-
-    get broadcast() {
-        return this;
-    }
-}
-
-const useChannel = (name) => new UseChannel(name);
-export { useChannel };

package/src/--use-deprecated/use-event-emmiter.js.txt

@@ -1,64 +0,0 @@
-class UseEventEmitter {
-    constructor(maxListeners = 10) {
-      this.events = {};
-      this.maxListeners = maxListeners; 
-    }
-    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=(maxListeners)=>new UseEventEmitter(maxListeners)
-export{useEventEmitter}

package/src/--use-deprecated/use-root.js

@@ -1,77 +0,0 @@
-class UseRoot {
-    constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
-        this.currentPropsMap = PropsMap;
-        this.namespace = namespace;
-        this.ValidateCssProps = ValidateCssProps;
-        // this.pairs = {};
-        // this.#maintain()
-        this.use(PropsMap)
-    }
-    use(PropsMap){
-        if(this.ValidateCssProps) ValidateCssProps(PropsMap)
-        this.currentPropsMap = PropsMap;
-        this.#maintain()
-        return this;
-    }
-    #maintain(){
-       const root = globalThis?.document?.documentElement?.style
-       for(let prop in this.currentPropsMap){
-        const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`
-           root.setProperty(
-            cssProp, 
-            this.currentPropsMap[prop]
-            ); 
-        //    Object.assign(this.pairs, {
-        //     [prop] : `var(--${this.namespace}-${prop})`
-        //    })
-           Object.defineProperty(this, prop, {
-                value: `var(${cssProp})`,
-                writable: true,
-                configurable: true,
-                enumerable: false 
-           })
-       }
-    }
-}
-
-function ValidateCssProps(PropsMap){
-    const validProps = new Set(Object.keys(document.documentElement.style));
-    for (let key in PropsMap) {
-        if (!validProps.has(key)) {
-            throw new Error(`Invalid CSS property: "${key}"`);
-        }
-    }
-}
-
-const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new UseRoot(PropsMap, {namespace, register, ValidateCssProps});
-
-export{
-    UseRoot,
-    useRoot
-}
-
-// Usage 
-
-/*
-const Styles = {
- S1 : {
-  background : 'white',
-  color : 'darkblue'
-  border : '2px darkblue solid"'
- },
- S2 : {
-  background : 'darkblue',
-  color : 'white'
-  border : '2px green solid"'
- }
-}
-const {use, border, background, color} = useRoot(Style.S1)
-
-tags.p("Test useRoot ").style({
-  border,
-  color,
-  background,
-  padding : '10px'
-})
-
-*/

package/src/--use-deprecated/use-storage.js.txt

@@ -1,73 +0,0 @@
-// To do : remove old items
-import { useChannel } from "./use-channel.js";
-class UseStorage{
-    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 UseStorage(localStorage,key,initialValue);
-const useSessionStorage=(key,initialValue)=>new UseStorage(sessionStorage,key,initialValue);
-export{
-    useLocaleStorage,
-    useSessionStorage
-}