ziko 0.37.0 → 0.38.1

package/src/index.js

@@ -1,94 +1,17 @@
-import { __ExtractAll__,__RemoveAll__ } from "./__helpers__/index.js";
-import Math from "./math/index.js";
-import UI from "./ui/index.js";
-import Time from "./time/index.js";
-import Data from "./data/index.js";
-import Reactivity from "./reactivity/index.js";
-import Graphics from "./graphics/index.js";
-
-// import * as Events from "./events/index.js"
-// import * as Use from "./use/index.js"
-
-import App,{__UI__,__HYDRATION_MAP__, __Config__, __CACHE__, defineParamsGetter, __HYDRATION__} from "./app";
-
 export * from "./math/index.js";
 export * from "./ui/index.js";
 export * from "./time/index.js";
 export * from "./data/index.js";
 export * from "./reactivity/index.js"
-export * from "./graphics/index.js";
 export * from "./app/index.js";
 
 export * from "./events/index.js";
 export * from "./use/index.js";
 
-[
-    App,
-    Math,
-    UI,
-    Time,
-    Data,
-    Reactivity,
-    Graphics,
-].forEach(n=>Object.assign(n,{
-    ExtractAll:()=>__ExtractAll__(n),
-    RemoveAll:()=>__RemoveAll__(n)
-}))
-
-const Ziko={
-    App,
-    Math,
-    UI,
-    Time,
-    Data,
-    Reactivity,
-    Graphics
-}
-
-if ( globalThis.__Ziko__ ) {
-    console.warn( 'WARNING: Multiple instances of Ziko.js being imported.' );
-	} else {
-		globalThis.__Ziko__={
-            ...Ziko,
-            __UI__,
-            __HYDRATION__,
-            __HYDRATION_MAP__,
-            __Config__,
-            __CACHE__,
-            ExtractAll,
-            RemoveAll
-        };
-        defineParamsGetter(__Ziko__)
-	}
-// globalThis.__Ziko__={
-//     ...Ziko,
-//     __UI__,
-//     __Config__,
-//     ExtractAll,
-//     RemoveAll
-// };
 if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
-function ExtractAll(){
-    UI.ExtractAll();
-    Math.ExtractAll();
-    Time.ExtractAll();
-    Reactivity.ExtractAll();
-    Graphics.ExtractAll();
-    Data.ExtractAll()
-    return this;
-}
-function RemoveAll(){
-    UI.RemoveAll();
-    Math.RemoveAll();
-    Time.RemoveAll();
-    Reactivity.RemoveAll();
-    Graphics.RemoveAll();
-    Data.RemoveAll()
-}
-
-export default Ziko;
 
+import './math/functions/proxy.js'
 
 

package/src/math/complex/index.js

@@ -53,6 +53,9 @@ class Complex extends ZikoMath{
             this.b = +b.toFixed(32);
         }
     }
+    isComplex(){
+        return true
+    }
     toString(){
         let str = "";
         if (this.a !== 0)

package/src/math/functions/index.js

@@ -58,29 +58,29 @@ const sqrtn=(x,n)=>{
         }
     }
 }
-const e=(...x)=>mapfun(Math.exp,...x);
-const ln=(...x)=>mapfun(Math.log,...x);
-const cos=(...x)=>mapfun(Fixed.cos,...x);
-const sin=(...x)=>mapfun(Fixed.sin,...x);
-const tan=(...x)=>mapfun(Fixed.tan,...x);
-const sec=(...x)=>mapfun(Fixed.sec,...x);
-const sinc=(...x)=>mapfun(Fixed.sinc,...x)
-const csc=(...x)=>mapfun(Fixed.csc,...x);
-const cot=(...x)=>mapfun(Fixed.cot,...x);
-const acos=(...x)=>mapfun(Fixed.acos,...x);
-const asin=(...x)=>mapfun(Fixed.asin,...x);
-const atan=(...x)=>mapfun(Fixed.atan,...x);
-const acot=(...x)=>mapfun(Fixed.acot,...x);
-const cosh=(...x)=>mapfun(Fixed.cosh,...x);
-const sinh=(...x)=>mapfun(Fixed.sinh,...x);
-const tanh=(...x)=>mapfun(Fixed.tanh,...x);
-const coth=(...x)=>mapfun(Fixed.coth,...x);
-const acosh=(...x)=>mapfun(Fixed.acosh,...x);
-const asinh=(...x)=>mapfun(Fixed.asinh,...x);
-const atanh=(...x)=>mapfun(Fixed.atanh,...x);
-const ceil=(...x)=>mapfun(Math.ceil,...x);
-const floor=(...x)=>mapfun(Math.floor,...x);
-const round=(...x)=>mapfun(Math.round,...x);
+const e=(...x) => mapfun(Math.exp,...x);
+const ln=(...x) => mapfun(Math.log,...x);
+const cos=(...x) => mapfun(Fixed.cos,...x);
+const sin=(...x) => mapfun(Fixed.sin,...x);
+const tan=(...x) => mapfun(Fixed.tan,...x);
+const sec=(...x) => mapfun(Fixed.sec,...x);
+const sinc=(...x) => mapfun(Fixed.sinc,...x)
+const csc=(...x) => mapfun(Fixed.csc,...x);
+const cot=(...x) => mapfun(Fixed.cot,...x);
+const acos=(...x) => mapfun(Fixed.acos,...x);
+const asin=(...x) => mapfun(Fixed.asin,...x);
+const atan=(...x) => mapfun(Fixed.atan,...x);
+const acot=(...x) => mapfun(Fixed.acot,...x);
+const cosh=(...x) => mapfun(Fixed.cosh,...x);
+const sinh=(...x) => mapfun(Fixed.sinh,...x);
+const tanh=(...x) => mapfun(Fixed.tanh,...x);
+const coth=(...x) => mapfun(Fixed.coth,...x);
+const acosh=(...x) => mapfun(Fixed.acosh,...x);
+const asinh=(...x) => mapfun(Fixed.asinh,...x);
+const atanh=(...x) => mapfun(Fixed.atanh,...x);
+const ceil=(...x) => mapfun(Math.ceil,...x);
+const floor=(...x) => mapfun(Math.floor,...x);
+const round=(...x) => mapfun(Math.round,...x);
 const atan2=(x,y,rad=true)=>{
     if(typeof x === "number"){
         if(typeof y === "number")return rad?Math.atan2(x,y):Math.atan2(x,y)*180/Math.PI;

package/src/math/functions/proxy.js

@@ -0,0 +1,58 @@
+let {abs, sqrt, cos, sin, tan, exp, log, cosh, sinh, tanh} = Math;
+// Math.abs = new Proxy(Math.abs, {
+//   apply(target, thisArg, args) {
+//     const x = args[0]
+//       if(typeof x === 'number') return target.apply(thisArg, args);
+//       if(x?.isComplex?.()){
+//         const {a, b, z, phi} = x
+//         const complex = (a, b) => new x.constructor(a, b) 
+//         switch(target.name){
+//           case 'abs' : return a.z;
+//           case 'sqrt' : return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2));
+//         }
+//       }
+      
+//   }
+// });
+
+
+for (const key of Object.getOwnPropertyNames(Math)) {
+  const fn = Math[key];
+  if (typeof fn === "function") {
+    Math[key] = new Proxy(fn, {
+      apply(target, thisArg, args) {
+        // console.log(target)
+        const x = args[0]
+        if(typeof x === 'number' || args.length === 0) return target.apply(thisArg, args);
+        if(x?.isComplex?.()){
+            const {a, b, z, phi} = x
+            const complex = (a, b) => new x.constructor(a, b);
+            switch(target.name){
+                case 'abs' : return x.z;
+                case 'sqrt' : return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2));
+                case 'log' : return complex(log(z), phi);
+                case 'exp' : return complex(exp(a)*cos(b),exp(a)*sin(b));
+                case 'cos' : return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
+                case 'sin' : return complex(sin(a)*cosh(b),cos(a)*sinh(b));
+                case 'tan' : {
+                    const DEN = cos(2*a)+cosh(2*b);
+                    return complex(sin(2*a) /DEN, sinh(2*b)/DEN);
+                }
+                case 'cosh' : return complex(cosh(a)*cos(b),sinh(a)*sin(b));
+                case 'sinh' : return complex(sinh(a)*cos(b),cosh(a)*sin(b));
+                case 'tanh' : {
+                    const DEN=cosh(2*a)+cos(2*b);
+                    return complex(sinh(2*a)/DEN,sin(2*b)/DEN)
+                }
+                default : return target.apply(thisArg, args)
+             }
+        }
+        // if( x.isMatrix?.()){
+        //     const {rows, cols, arr} = x
+        //     // return new x.constructor(rows, cols, arr.flat(1).map(n=>));
+        // }
+        throw new TypeError(`Math.${key} expects only numbers`);
+      }
+    });
+  }
+}

package/src/math/utils/mapfun.js

@@ -1,36 +1,31 @@
-/** @module Math */
 import { Matrix } from "../matrix/index.js";
 import { Complex , complex } from "../complex/index.js";
 import {ln,e,cos,sin,sqrt,cosh,sinh} from "../functions/index.js";
 import { Fixed } from "../functions/helper.js";
- /**
- * map a function to ...X
- * @param {function} fun
- * @param {...any} X
- * @returns {any|any[]}
- */
+// To generalise
+
 const mapfun=(fun,...X)=>{
     const Y=X.map(x=>{
-        if(x===null)return fun(null);
-        if(["number","string","boolean","bigint","undefined"].includes(typeof x))return fun(x);
-        if(x instanceof Array)return x.map(n=>mapfun(fun,n));
-        if(ArrayBuffer.isView(x))return x.map(n=>fun(n));
-        if(x instanceof Set)return new Set(mapfun(fun,...[...x]));
-        if(x instanceof Map)return new Map([...x].map(n=>[n[0],mapfun(fun,n[1])]));
+        if(x===null) return fun(null);
+        if(["number","string","boolean","bigint","undefined"].includes(typeof x)) return fun(x);
+        if(x instanceof Array) return x.map(n=>mapfun(fun,n));
+        if(ArrayBuffer.isView(x)) return x.map(n=>fun(n));
+        if(x instanceof Set) return new Set(mapfun(fun,...[...x]));
+        if(x instanceof Map) return new Map([...x].map(n=>[n[0],mapfun(fun,n[1])]));
         if(x instanceof Matrix){
-            return new Matrix(x.rows,x.cols,mapfun(x.arr.flat(1)))
+            return new Matrix(x.rows,x.cols, mapfun(x.arr.flat(1)))
         }
         if(x instanceof Complex){
             const [a,b,z,phi]=[x.a,x.b,x.z,x.phi];
             switch(fun){
-                case Math.log:return complex(ln(z),phi); // Done
-                case Math.exp:return complex(e(a)*cos(b),e(a)*sin(b)); // Done
-                case Math.abs:return z; // Done
-                case Math.sqrt:return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2)); // Done
-                case Fixed.cos:return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
-                case Fixed.sin:return complex(sin(a)*cosh(b),cos(a)*sinh(b));
+                case Math.log: return complex(ln(z),phi); // Done
+                case Math.exp: return complex(e(a)*cos(b),e(a)*sin(b)); // Done
+                case Math.abs: return z; // Done
+                case Math.sqrt: return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2)); // Done
+                case Fixed.cos: return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
+                case Fixed.sin: return complex(sin(a)*cosh(b),cos(a)*sinh(b));
                 case Fixed.tan:{
-                    const DEN=cos(2*a)+cosh(2*b);
+                    const DEN = cos(2*a)+cosh(2*b);
                     return complex(sin(2*a)/DEN,sinh(2*b)/DEN);
                 }
                 case Fixed.cosh:return complex(cosh(a)*cos(b),sinh(a)*sin(b));
@@ -43,6 +38,7 @@ const mapfun=(fun,...X)=>{
             }
         }
         else if(x instanceof Object){
+            return Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun(fun,n[1])]))
             return fun(Object) || Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun(fun,n[1])]))
         }
     });

package/src/no-module.js

@@ -0,0 +1,32 @@
+// import { __ExtractAll__,__RemoveAll__ } from "./__helpers__/index.js";
+
+// [
+//     App,
+//     Math,
+//     UI,
+//     Time,
+//     Data,
+//     Reactivity,
+//     Graphics,
+// ].forEach(n=>Object.assign(n,{
+//     ExtractAll:()=>__ExtractAll__(n),
+//     RemoveAll:()=>__RemoveAll__(n)
+// }))
+
+// function ExtractAll(){
+//     UI.ExtractAll();
+//     Math.ExtractAll();
+//     Time.ExtractAll();
+//     Reactivity.ExtractAll();
+//     Graphics.ExtractAll();
+//     Data.ExtractAll()
+//     return this;
+// }
+// function RemoveAll(){
+//     UI.RemoveAll();
+//     Math.RemoveAll();
+//     Time.RemoveAll();
+//     Reactivity.RemoveAll();
+//     Graphics.RemoveAll();
+//     Data.RemoveAll()
+// }

package/src/time/{animation.js → animation/index.js}

@@ -1,5 +1,5 @@
-import { Ease } from "./utils";
-import { map } from "../math/utils"
+import { Ease } from "../utils";
+import { map } from "../../math/utils"
 class ZikoTimeAnimation{
     constructor(callback,ease=Ease.Linear,step=50,{t=[0,null],start=true,duration=3000}={}){
         this.cache={

package/src/time/decorators/index.js

@@ -0,0 +1,17 @@
+const debounce=(fn,delay=1000)=>{
+    let id;
+    return(...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
+}
+const throttle=(fn,delay)=>{
+    let lastTime=0;
+    return (...args) => {
+        const now = new Date().getTime()
+        if(now-lastTime < delay) return;
+        lastTime = now;
+        fn(...args); 
+    }
+}
+export{
+    debounce,
+    throttle
+}

package/src/time/index.js

@@ -1,12 +1,11 @@
-export * from "./loop.js"
-export * from "./animation.js"
-export * from "./utils";
-import * as Loop from "./loop.js";
-import * as Animation from "./loop.js";
-import * as Utils from "./utils"
-const Time = {
-    ...Loop,
-    ...Animation,
-    ...Utils
-}
-export default Time
+export * from './loop/index.js'
+export * from './animation/index.js'
+export * from './utils/index.js';
+export * from './decorators/index.js';
+// import * as Utils from './utils'
+// const Time = {
+//     ...Loop,
+//     ...Animation,
+//     ...Utils
+// }
+// export default Time

package/src/time/utils/index.js

@@ -13,6 +13,5 @@ export{
     timeTaken,
     Ease
 }
-export * from "./decorators.js";
 export * from "./performance.js";
 export * from "./ui.js"

package/src/ui/{methods → __methods__}/dom.js

@@ -1,4 +1,4 @@
-import { text } from "../elements/text/text.js";
+import { text } from "../text/index.js";
 export const DomMethods = {
   append(...ele) {
     __addItem__.call(this, "append", "push", ...ele);
@@ -75,24 +75,25 @@ function __addItem__(adder, pusher, ...ele) {
   }
   for (let i = 0; i < ele.length; i++) {
     if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
-    if (ele[i]?.isZikoUIElement) {
-        ele[i].cache.parent = this;
-        this.element[adder](ele[i].element);
-        ele[i].target = this.element;
-        this.items[pusher](ele[i]);
-    } 
-    // Fix Items Latter
-    if( ele[i] instanceof Function){
-      const getter = ele[i]();
+        // Fix Items Latter
+    if (ele[i] instanceof Function) {
+     const getter = ele[i]();
       if (getter.isStateGetter) {
-        const textNode = document?.createTextNode(getter.value);
-        this.element.appendChild(textNode);
+        ele[i] = text(getter.value);
         getter._subscribe(
-          (newValue) => (textNode.textContent = newValue),
+            (newValue) => (ele[i].element.textContent = newValue),
+            ele[i] 
         );
+        // this.element.appendChild(textNode);
       }
     }
+    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
+    if (ele[i]?.isZikoUINode) {
+        ele[i].cache.parent = this;
+        this.element?.[adder](ele[i].element);
+        ele[i].target = this.element;
+        this.items[pusher](ele[i]);
+    } 
     else if (ele[i] instanceof Object) {
       if (ele[i]?.style) this.style(ele[i]?.style);
       if (ele[i]?.attr) {

package/src/ui/__methods__/index.js

@@ -0,0 +1,4 @@
+export * from './dom.js'
+export * from './events.js'
+export * from './indexing.js'
+// export * from './style.js'

package/src/ui/{utils → __utils__}/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../constructors/ziko-ui-element.js";
+import ZikoUIElement from "../constructors/ZikoUIElement.js";
 const Id = (a) => document.getElementById(a);
 const Class = (a) => [...document.getElementsByClassName(a)];
 const $=(...selector)=>{

package/src/ui/constructors/{ziko-ui-element.js → ZikoUIElement.js}

@@ -1,10 +1,13 @@
-import ZikoUINode from "./ziko-ui-node.js";
-import { compose } from "../../__helpers__/index.js";
-import { DomMethods } from "../methods/dom.js";
-import { IndexingMethods } from "../methods/indexing.js";
-import { EventsMethodes } from "../methods/events.js";
+import ZikoUINode from "./ZikoUINode.js";
+import { register } from "../../__helpers__/register/index.js";
+import { 
+  DomMethods,
+  IndexingMethods,
+  EventsMethodes
+} from "../__methods__/index.js";
 import { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
-import { ZikoUIElementStyle } from "../style/index.js";
+import { ZikoUIElementStyle } from "./style/index.js";
+
 import { 
   useCustomEvent,
   useSwipeEvent,
@@ -15,12 +18,14 @@ import {
 } from "../../reactivity/index.js"
 import { Random } from "../../math/index.js";
 import { Str } from "../../data/index.js";
+import {__init__global__} from '../../__ziko__/index.js';
+__init__global__()
 class ZikoUIElement extends ZikoUINode{
-  constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
+  constructor(element, name="", {type="html", useDefaultStyle=false}={}){
     super()
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
-      switch(el_type){
+      switch(type){
         case "html" : element = globalThis?.document?.createElement(element); break;
         case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
         default : throw Error("Not supported")
@@ -29,18 +34,7 @@ class ZikoUIElement extends ZikoUINode{
     else{
       this.target = element.parentElement;
     }
-    // if(element)this.__ele__ = element;
-    compose(
-      this, 
-      DomMethods,
-      IndexingMethods,
-      EventsMethodes
-    )
-    // if(false){
-    //   import("../methods/tree.js").then(({ default: ExternalMethods }) => {
-    //     compose(this, ExternalMethods);
-    //   });
-    // }
+    register(this, DomMethods, IndexingMethods, EventsMethodes);
     Object.assign(this.cache, {
       name,
       isInteractive : [true, false][Math.floor(2*Math.random())],
@@ -105,14 +99,9 @@ class ZikoUIElement extends ZikoUINode{
   isInteractive(){
     return this.cache.isInteractive;
   }
-  // Remove get
   isZikoUIElement(){
     return true;
   }
-  register(){
-
-    return this;
-  }
   get st(){
     return this.cache.style;
   }
@@ -183,82 +172,6 @@ class ZikoUIElement extends ZikoUINode{
       });
     }
   }
-  filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
-    const FilterItems = this.items.filter(condition_callback);
-    FilterItems.forEach(if_callback);
-    this.items
-      .filter((item) => !FilterItems.includes(item))
-      .forEach(else_callback);
-    return this;
-  }
-  filterByTextContent(text, exactMatch = false) {
-    this.items.forEach((n) => n.render());
-    this.filter(
-      (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
-      (e) => e.unrender(),
-    );
-    // this.items.filter(n=>{
-    //   const content=n.element.textContent;
-    //   return !(exactMatch?content===text:content.includes(text))
-    // }).map(n=>n.unrender());
-    //  return this;
-  }
-  filterByClass(value) {
-    this.items.map((n) => n.render());
-    this.items
-      .filter((n) => !n.classes.includes(value))
-      .map((n) => n.unrender());
-    return this;
-  }
-  sortByTextContent(value, displays) {
-    let item = this.children;
-    item
-      .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n) => {
-        n.style.display = "none";
-      });
-    item
-      .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n, i) => (n.style.display = displays[i]));
-    //return item.filter(n=>n.style.display!="none")
-    item.filter((n) => n.style.display != "none");
-    return this;
-  }
-  get #SwitchedStyleRTL_LTR(){
-    const CalculedStyle = globalThis.getComputedStyle(this.element); 
-    const SwitchedStyle = {}
-    if(CalculedStyle.marginRight!=="0px")Object.assign(SwitchedStyle, {marginLeft: CalculedStyle.marginRight});
-    if(CalculedStyle.marginLeft!=="0px")Object.assign(SwitchedStyle, {marginRight: CalculedStyle.marginLeft});
-    if(CalculedStyle.paddingRight!=="0px")Object.assign(SwitchedStyle, {paddingLeft: CalculedStyle.paddingRight});
-    if(CalculedStyle.paddingLeft!=="0px")Object.assign(SwitchedStyle, {paddingRight: CalculedStyle.paddingLeft});
-    if(CalculedStyle.left!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.left});
-    if(CalculedStyle.right!=="0px")Object.assign(SwitchedStyle, {left: CalculedStyle.right});
-    if(CalculedStyle.textAlign === "right")Object.assign(SwitchedStyle, {textAlign: "left"});
-    if(CalculedStyle.textAlign === "left")Object.assign(SwitchedStyle, {textAlign: "right"});
-    if(CalculedStyle.float === "right")Object.assign(SwitchedStyle, {float: "left"});
-    if(CalculedStyle.float === "left")Object.assign(SwitchedStyle, {float: "right"});
-    if(CalculedStyle.borderRadiusLeft!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusRight});
-    if(CalculedStyle.borderRadiusRight!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusLeft});
-    if(["flex","inline-flex"].includes(CalculedStyle.display)){
-      if(CalculedStyle.justifyContent === "flex-end")Object.assign(SwitchedStyle, {justifyContent: "flex-start"});
-      if(CalculedStyle.justifyContent === "flex-start")Object.assign(SwitchedStyle, {justifyContent: "flex-end"});
-    }
-    return SwitchedStyle;
-  }
-  useRtl(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "rtl"
-    }) : this.style({direction : "rtl"}); 
-    return this;
-  }
-  useLtr(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "ltr"
-    }) : this.style({direction : "ltr"}); 
-    return this;
-  }
   freeze(freeze){
     this.cache.isFrozzen=freeze;
     return this;
@@ -280,9 +193,9 @@ class ZikoUIElement extends ZikoUINode{
   }
     // Attributes
   #setAttr(name, value){
-    if(this.element.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    if(this.element?.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
     if(this?.attr[name] && this?.attr[name]===value) return;
-    this.element.setAttribute(name, value)
+    this.element?.setAttribute(name, value)
     Object.assign(this.cache.attributes, {[name]:value});
   }
   setAttr(name, value) {
@@ -380,19 +293,6 @@ class ZikoUIElement extends ZikoUINode{
     this.observer.intersection.start();
     return this;
   }
-  // setFullScreen(set = true, e) {
-  //   if(!this.element.requestFullscreen){
-  //     console.error("Fullscreen API is not supported in this browser.");
-  //     return this;
-  //   }
-  //   if (set) this.element.requestFullscreen(e);
-  //   else globalThis.document.exitFullscreen();
-  //   return this;
-  // }
-  // toggleFullScreen(e) {
-  //   if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
-  //   else globalThis.document.exitFullscreen();
-  //   return this;
-  // }
+
 }
 export default ZikoUIElement;