ziko 0.38.0 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",
@@ -60,6 +60,7 @@
     "./time": {},
     "./components": {}
   },
+  "sideEffects" : false,
   "bin": {
     "create-ziko-app": "starter/bin/index.js"
   },

package/src/__helpers__/composition-dep/compose-class.js

@@ -0,0 +1,46 @@
+export function composeClass(Class, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+
+  class Composed extends Class {
+    constructor(...args) {
+      super(...args);
+      // ⚠️ Do NOT assign mixin functions to `this`
+    }
+  }
+
+  // Copy prototype properties (methods, getters/setters, non-functions)
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+
+    if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+      Object.defineProperty(Composed.prototype, key, desc);
+    } else if (typeof desc.value === 'function') {
+      // Only add method if it does NOT already exist
+      if (!Composed.prototype.hasOwnProperty(key)) {
+        Object.defineProperty(Composed.prototype, key, desc);
+      }
+    }
+  }
+
+  return Composed;
+}
+
+// // Usage
+// class UIBase {
+//   log() { console.log('UIBase log'); }
+// }
+
+// const mixin = {
+//   at() { return 0; },
+//   hello() { return 'hello'; }
+// };
+
+// const UIComposed = composeClass(UIBase, mixin);
+
+// class UI2 extends UIComposed {
+//   at() { return 1; }  // ✅ correctly overrides mixin
+// }
+
+// const ui = new UI2();
+// console.log(ui.at());    // 1
+// console.log(ui.hello()); // 'hello'

package/src/__helpers__/register/index.js

@@ -0,0 +1,6 @@
+import { register_to_class } from "./register-to-class.js";
+import { register_to_instance } from "./register-to-instance";
+export const register = (target, ...mixins) => {
+  if(typeof target === 'function') register_to_class(target, ...mixins)
+  else register_to_instance(target, ...mixins)
+  }

package/src/__helpers__/register/register-to-class.js

@@ -0,0 +1,16 @@
+export function register_to_class(target, ...mixins){
+    mixins.forEach(n => _register_to_class_(target, n))
+}
+function _register_to_class_(target, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+    if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+      Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+    } else if (typeof desc.value === 'function') {
+      if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
+        Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+      }
+    }
+  }
+}

package/src/__helpers__/register/register-to-instance.js

@@ -0,0 +1,18 @@
+export function register_to_instance(target, ...mixins){
+    mixins.forEach(n => _register_to_instance_(target, n))
+}
+function _register_to_instance_(instance, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+
+    if ('get' in desc || 'set' in desc) {
+      Object.defineProperty(instance, key, desc);
+    } else if (typeof desc.value === 'function') {
+      instance[key] = desc.value.bind(instance);
+    } else {
+      instance[key] = desc.value;
+    }
+  }
+}

package/src/__ziko__/index.js

@@ -3,14 +3,15 @@ import { __UI__ } from './__ui__.js';
 import { __Config__ } from './__config__.js';
 import { __HYDRATION__, __HYDRATION_MAP__ } from './__hydration__.js';
 import { __CACHE__ } from './__cache__.js';
-
-if ( !globalThis?.__Ziko__ ){
-    globalThis.__Ziko__ = {
-                __UI__,
-                __HYDRATION__,
-                __HYDRATION_MAP__,
-                __Config__,
-                __CACHE__,
-            };
-    defineParamsGetter(__Ziko__)
-}
+export function __init__global__(){
+    if ( !globalThis?.__Ziko__ ){
+        globalThis.__Ziko__ = {
+                    __UI__,
+                    __HYDRATION__,
+                    __HYDRATION_MAP__,
+                    __Config__,
+                    __CACHE__,
+                };
+        defineParamsGetter(__Ziko__)
+    }
+}

package/src/events/types/clipboard.d.ts

@@ -1,6 +1,6 @@
 import { __ZikoEvent__ } from "../__ZikoEvent__.js";
 import type { Callback, ClipboardEventKeys } from './__Shared__.js';
-import { ZikoUIElement } from "../../ui/index.js";
+import { UIElement } from "../../ui/index.js";
 
 declare class ZikoEventClipboard extends __ZikoEvent__ {
   constructor(target: any, customizer?: Function);
@@ -12,7 +12,7 @@ declare class ZikoEventClipboard extends __ZikoEvent__ {
 
 }
 
-declare const bindClipboardEvent: (target: ZikoUIElement, customizer?: Function) => ZikoEventClipboard;
+declare const bindClipboardEvent: (target: UIElement, customizer?: Function) => ZikoEventClipboard;
 
 export {
   ZikoEventClipboard,

package/src/events/types/focus.d.ts

@@ -1,6 +1,6 @@
 import { __ZikoEvent__ } from "../__ZikoEvent__.js";
 import type { Callback } from './__Shared__.js';
-import { ZikoUIElement } from "../../ui/index.js";
+import { UIElement } from "../../ui/index.js";
 
 declare class ZikoEventFocus extends __ZikoEvent__ {
   constructor(target: any, customizer?: Function);
@@ -11,7 +11,7 @@ declare class ZikoEventFocus extends __ZikoEvent__ {
 
 }
 
-declare const bindFocusEvent: (target: ZikoUIElement, customizer?: Function) => ZikoEventFocus;
+declare const bindFocusEvent: (target: UIElement, customizer?: Function) => ZikoEventFocus;
 
 export {
   ZikoEventFocus,

package/src/events/types/pointer.d.ts

@@ -1,6 +1,6 @@
 import { __ZikoEvent__ } from "../__ZikoEvent__.js";
 import type { EventMethodesBinder, Callback, PointerEventKeys } from './__Shared__.js';
-import { ZikoUIElement } from "../../ui/index.js";
+import { UIElement } from "../../ui/index.js";
 
 type PointerEventMethodesBinder = EventMethodesBinder<PointerEventKeys, ZikoEventPointer>;
 
@@ -37,7 +37,7 @@ declare class ZikoEventPointer extends __ZikoEvent__ implements PointerEventMeth
 
 }
 
-declare const bindPointerEvent: (target: ZikoUIElement, customizer?: Function) => ZikoEventPointer;
+declare const bindPointerEvent: (target: UIElement, customizer?: Function) => ZikoEventPointer;
 
 export {
   ZikoEventPointer,

package/src/hooks/use-state.js

@@ -45,3 +45,8 @@ export function useState(initialValue) {
 
     return [getValue, setValue, controller];
 }
+
+export const isStateGetter = (arg) => {
+    return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
+}
+

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

@@ -1,4 +1,4 @@
-export * from "./useStyle.js";
+// export * from "./useStyle.js";
 // export * from "./useTheme";
 // export * from "../Head/useTitle";
 // export * from "../Head/useFavIcon";

package/src/ui/__methods__/attrs.js

@@ -0,0 +1,46 @@
+import { Str } from "../../data";
+import { isStateGetter } from "../../hooks/use-state.js";
+
+// To Do add getter, watchAttr
+export const AttrsMethods = {
+  setAttr(name, value) {
+    if(name instanceof Object){
+      const [names,values]=[Object.keys(name),Object.values(name)];
+      for(let i=0;i<names.length;i++){
+        if(values[i] instanceof Array)value[i] = values[i].join(" ");
+        _set_attrs_.call(this, names[i], values[i])
+      }
+    }
+    else{
+      if(value instanceof Array) value = value.join(" ");
+      _set_attrs_.call(this, name, value)
+    }
+    return this;
+  },
+  removeAttr(...names) {
+    for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
+    return this;
+  },
+  getAttr(name){
+    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    return this.element.attributes[name].value;
+  },
+  setContentEditable(bool = true) {
+    this.setAttr("contenteditable", bool);
+    return this;
+  }
+};
+
+function _set_attrs_(name, value){
+    if(this.element?.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    if(this?.attr[name] && this?.attr[name]===value) return;
+    if(isStateGetter(value)){
+        const getter = value()
+        getter._subscribe(
+            (newValue) => this.element?.setAttribute(name, newValue),
+            this 
+        );
+    }
+    else this.element?.setAttribute(name, value)
+    Object.assign(this.cache.attributes, {[name]:value});   
+}

package/src/ui/__methods__/index.js

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

package/src/ui/__methods__/style.js

@@ -0,0 +1,14 @@
+// Process width and height
+export const StyleMethods = {
+    style(styles){
+        Object.assign(this.element.style, styles)
+        return this;
+    },
+    size(width, height){
+        return this.style({width, height})
+    },
+    animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
+        this.element?.animate(keyframe,{duration, iterations, easing});
+        return this;
+  }
+}

package/src/ui/__utils__/index.js

@@ -1,11 +1,11 @@
-import ZikoUIElement from "../constructors/ZikoUIElement.js";
+import UIElement from "../constructors/UIElement.js";
 const Id = (a) => document.getElementById(a);
 const Class = (a) => [...document.getElementsByClassName(a)];
 const $=(...selector)=>{
   var ele=[]
   for(let i=0;i<selector.length;i++){
     if(typeof selector[i]=="string")ele.push(...document.querySelectorAll(selector[i]));
-    if(selector[i] instanceof ZikoUIElement)ele.push(selector[i].element)
+    if(selector[i] instanceof UIElement)ele.push(selector[i].element)
   }
   return ele.length===1?ele[0]:ele;
 }

package/src/ui/constructors/{ZikoUIElement.js → UIElement.js}

@@ -1,10 +1,13 @@
-import ZikoUINode from "./ZikoUINode.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 { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
-import { ZikoUIElementStyle } from "./style/index.js";
+import UINode from "./UINode.js";
+import { register } from "../../__helpers__/register/index.js";
+import { 
+  AttrsMethods,
+  DomMethods,
+  IndexingMethods,
+  EventsMethodes,
+  StyleMethods
+} from "../__methods__/index.js";
+
 import { 
   useCustomEvent,
   useSwipeEvent,
@@ -14,34 +17,30 @@ import {
   watchChildren
 } from "../../reactivity/index.js"
 import { Random } from "../../math/index.js";
-import { Str } from "../../data/index.js";
-import '../../__ziko__/index.js';
-class ZikoUIElement extends ZikoUINode{
-  constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
+import {__init__global__} from '../../__ziko__/index.js';
+__init__global__()
+class UIElement extends UINode{
+  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")
       }
     }
     else{
-      this.target = element.parentElement;
+      this.target = element?.parentElement;
     }
-    // if(element)this.__ele__ = element;
-    compose(
+    register(
       this, 
-      DomMethods,
-      IndexingMethods,
+      AttrsMethods, 
+      DomMethods, 
+      StyleMethods,
+      IndexingMethods, 
       EventsMethodes
-    )
-    // if(false){
-    //   import("../methods/tree.js").then(({ default: ExternalMethods }) => {
-    //     compose(this, ExternalMethods);
-    //   });
-    // }
+    );
     Object.assign(this.cache, {
       name,
       isInteractive : [true, false][Math.floor(2*Math.random())],
@@ -51,7 +50,6 @@ class ZikoUIElement extends ZikoUINode{
       isHidden: false,
       isFrozzen:false,
       legacyParent : null,
-      style: new ZikoUIElementStyle({}),
       attributes: {},
       filters: {},
       temp:{}
@@ -76,7 +74,6 @@ class ZikoUIElement extends ZikoUINode{
     if(element)Object.assign(this.cache,{element});
     this.uuid = `${this.cache.name}-${Random.string(16)}`
     this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
-    this.cache.style.linkTo(this);
     useDefaultStyle && this.style({ 
       position: "relative",
       boxSizing:"border-box",
@@ -109,10 +106,6 @@ class ZikoUIElement extends ZikoUINode{
   isZikoUIElement(){
     return true;
   }
-  register(){
-
-    return this;
-  }
   get st(){
     return this.cache.style;
   }
@@ -162,25 +155,17 @@ class ZikoUIElement extends ZikoUINode{
     else UI.element=this.element.cloneNode(true);
     return UI.render(render);
   }
-  style(styles){
-    styles instanceof ZikoUseStyle ? this.st.style(styles.current): this.st.style(styles);
-    return this;
-  }
-  size(width,height){
-    this.st.size(width,height);
-    return this; 
-  }
   [Symbol.iterator]() {
     return this.items[Symbol.iterator]();
   }
   maintain() {
-  for (let i = 0; i < this.items.length; i++) {
-    Object.defineProperty(this, i, {
-      value: this.items[i],
-      writable: true,
-      configurable: true,
-      enumerable: false 
-      });
+    for (let i = 0; i < this.items.length; i++) {
+      Object.defineProperty(this, i, {
+        value: this.items[i],
+        writable: true,
+        configurable: true,
+        enumerable: false 
+        });
     }
   }
   freeze(freeze){
@@ -198,43 +183,6 @@ class ZikoUIElement extends ZikoUINode{
   describe(label){
     if(label)this.setAttr("aria-label",label)
   }
-  animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-    this.element?.animate(keyframe,{duration, iterations, easing});
-    return this;
-  }
-    // Attributes
-  #setAttr(name, value){
-    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)
-    Object.assign(this.cache.attributes, {[name]:value});
-  }
-  setAttr(name, value) {
-    if(name instanceof Object){
-      const [names,values]=[Object.keys(name),Object.values(name)];
-      for(let i=0;i<names.length;i++){
-        if(values[i] instanceof Array)value[i] = values[i].join(" ");
-        this.#setAttr(names[i], values[i])
-      }
-    }
-    else{
-      if(value instanceof Array)value = value.join(" ");
-      this.#setAttr(name, value)
-    }
-    return this;
-  }
-  removeAttr(...names) {
-    for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
-    return this;
-  }
-  getAttr(name){
-    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
-    return this.element.attributes[name].value;
-  }
-  setContentEditable(bool = true) {
-    this.setAttr("contenteditable", bool);
-    return this;
-  }
   get children() {
     return [...this.element.children];
   }
@@ -306,4 +254,4 @@ class ZikoUIElement extends ZikoUINode{
   }
 
 }
-export default ZikoUIElement;
+export default UIElement;

package/src/ui/constructors/{ZikoUINode.js → UINode.js}

@@ -1,4 +1,4 @@
-export default class ZikoUINode {
+export default class UINode {
     constructor(node){
         this.cache = {
             node
@@ -12,4 +12,4 @@ export default class ZikoUINode {
     } 
 }
 
-globalThis.node = (node) => new ZikoUINode(node);
+globalThis.node = (node) => new UINode(node);

package/src/ui/flex/index.js

@@ -1,7 +1,7 @@
-import ZikoUIElement from "../constructors/ZikoUIElement.js";
-class ZikoUIFlex extends ZikoUIElement {
+import UIElement from "../constructors/UIElement.js";
+class ZikoUIFlex extends UIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
-    super(tag ,"Flex");
+    super({element : tag , name : "Flex"});
     this.direction = "cols";
     if (typeof w == "number") w += "%";
     if (typeof h == "number") h += "%";
@@ -69,13 +69,13 @@ class ZikoUIFlex extends ZikoUIElement {
   }
 }
 
-const Flex = (...ZikoUIElement) =>{
+const Flex = (...UIElement) =>{
   let tag="div";
-  if(typeof ZikoUIElement[0]==="string"){
-    tag=ZikoUIElement[0];
-    ZikoUIElement.pop();
+  if(typeof UIElement[0]==="string"){
+    tag=UIElement[0];
+    UIElement.pop();
   }
-  return new ZikoUIFlex(tag).append(...ZikoUIElement);
+  return new ZikoUIFlex(tag).append(...UIElement);
 }
 function set_vertical(direction){
   direction == 1

package/src/ui/graphics/canvas.js

@@ -1,6 +1,6 @@
-import  ZikoUIElement from "../constructors/ZikoUIElement.js";
+import  UIElement from "../constructors/UIElement.js";
 import {Matrix} from "../../math/matrix/Matrix.js"
-class ZikoUICanvas extends ZikoUIElement{
+class ZikoUICanvas extends UIElement{
     constructor(w,h){
         super("canvas","canvas");
         this.ctx = this.element?.getContext("2d");

package/src/ui/graphics/svg.js

@@ -1,5 +1,5 @@
-import ZikoUIElement  from "../constructors/ZikoUIElement.js";
-class ZikoUISvg extends ZikoUIElement {
+import UIElement  from "../constructors/UIElement.js";
+class ZikoUISvg extends UIElement {
     constructor(w=360,h=300) {
       super("svg","svg");
       //this.cache={};

package/src/ui/grid/index.js

@@ -1,7 +1,7 @@
-import ZikoUIElement from "../constructors/ZikoUIElement.js"
-class ZikoUIGrid extends ZikoUIElement {
+import UIElement from "../constructors/UIElement.js"
+class ZikoUIGrid extends UIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
-      super(tag,"Grid");
+      super({element : tag, name : "Grid"});
       this.direction = "cols";
       if (typeof w == "number") w += "%";
       if (typeof h == "number") h += "%";
@@ -29,5 +29,5 @@ class ZikoUIGrid extends ZikoUIElement {
         return this;
     }
 }
-const Grid = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
+const Grid = (...UIElement) => new ZikoUIGrid("div").append(...UIElement);
 export {Grid,ZikoUIGrid};

package/src/ui/index.js

@@ -1,5 +1,5 @@
-export { default as ZikoUIElement } from "./constructors/ZikoUIElement.js"
-export { default as ZikoUINode } from "./constructors/ZikoUINode.js"
+export { default as UIElement } from "./constructors/UIElement.js"
+export { default as UINode } from "./constructors/UINode.js"
 export * from './tags/index.js';
 export * from './text/index.js';
 export * from './flex/index.js';

package/src/ui/suspense/index.js

@@ -1,7 +1,7 @@
-import ZikoUIElement from "../constructors/ZikoUIElement";
-class ZikoUISuspense extends ZikoUIElement{
+import UIElement from "../constructors/UIElement";
+class ZikoUISuspense extends UIElement{
     constructor(fallback_ui, callback){
-        super("div", "suspense")
+        super({element : "div", name : "suspense"})
         this.setAttr({
             dataTemp : "suspense"
         })