ziko 0.0.31 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.31",
+  "version": "0.33.0",
   "description": "a versatile javaScript framework offering a rich set of UI components, advanced mathematical utilities, reactivity, animations, client side routing and graphics capabilities",
   "keywords": [
     "front-end",

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

@@ -0,0 +1,28 @@
+export function composeClass(Class, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+
+  class Composed extends Class {
+    constructor(...args) {
+      super(...args);
+      for (const key of Reflect.ownKeys(descriptors)) {
+        const desc = descriptors[key];
+
+        if (typeof desc.value === 'function') {
+          this[key] = desc.value.bind(this);
+        }
+      }
+    }
+  }
+
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+
+    if ('get' in desc || 'set' in desc) {
+      Object.defineProperty(Composed.prototype, key, desc);
+    } else if (typeof desc.value !== 'function') {
+      Object.defineProperty(Composed.prototype, key, desc);
+    }
+  }
+
+  return Composed;
+}

package/src/__helpers__/composition/compose-instance.js

@@ -0,0 +1,15 @@
+export function composeInstance(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/__helpers__/composition/compose.js

@@ -0,0 +1,11 @@
+import { composeClass } from "./compose-class.js";
+import { composeInstance } from "./compose-instance.js";
+export function compose(target, ...mixin) {
+  if (typeof target === 'function') {
+    return mixin.forEach(item =>composeClass(target, item));
+  } else if (typeof target === 'object') {
+    mixin.forEach(item =>composeInstance(target, item));
+  } else {
+    throw new TypeError("compose: target must be a class or instance");
+  }
+}

package/src/__helpers__/composition/index.js

@@ -0,0 +1,3 @@
+export * from "./compose.js";
+export * from "./compose-class.js";
+export * from "./compose-instance.js"

package/src/__helpers__/index.js

@@ -16,7 +16,7 @@ const __RemoveAll__ =(obj)=> {
         }
     }
 }
-const mixin = (target, ...sources) => {
+export const mixin = (target, ...sources) => {
     sources.forEach(source => {
         Object.getOwnPropertyNames(source.prototype).forEach(name => {
             if (name !== 'constructor') {
@@ -55,7 +55,9 @@ class B{
 
 // ab=new AB()
 export{
-    mixin,
     __ExtractAll__,
     __RemoveAll__
 }
+
+
+export * from "./composition/index.js"

package/src/compose.js

@@ -0,0 +1,89 @@
+function composeInstance(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); // override-safe
+    } else {
+      instance[key] = desc.value;
+    }
+  }
+}
+
+function composeClass(Base, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+
+  return class extends Base {
+    constructor(...args) {
+      super(...args);
+      for (const key of Reflect.ownKeys(descriptors)) {
+        const desc = descriptors[key];
+        if (typeof desc.value === 'function') {
+          this[key] = desc.value.bind(this); // override-safe
+        }
+      }
+    }
+  };
+}
+
+
+function defineAccessorsAndData(proto, 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(proto, key, desc);
+    }
+  }
+}
+
+
+function compose(target, mixin) {
+  if (typeof target === 'function') {
+    const Composed = composeClass(target, mixin);
+    defineAccessorsAndData(Composed.prototype, mixin); // this order ensures overriding
+    return Composed;
+  } else if (typeof target === 'object' && target !== null) {
+    composeInstance(target, mixin);
+  } else {
+    throw new TypeError("compose: target must be a class or instance");
+  }
+}
+const mixin = {
+  greet() { return `Hello from mixin, ${this.name}`; },
+  get upperName() { return this.name.toUpperCase(); }
+};
+
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+  greet() {
+    return `Hello from class, ${this.name}`;
+  }
+}
+
+// CLASS MODE
+const ComposedPerson = compose(Person, mixin);
+const p1 = new ComposedPerson("Zak");
+console.log(p1.greet());       // Hello from mixin, Zak
+console.log(p1.upperName);     // ZAK
+
+// INSTANCE MODE
+class Animal {
+  constructor(name) {
+    this.name = name;
+    compose(this, mixin);
+  }
+
+  greet() {
+    return `Animal says hi, ${this.name}`;
+  }
+}
+const a = new Animal("Milo");
+console.log(a.greet());        // Hello from mixin, Milo
+console.log(a.upperName);      // MILO

package/src/ui/elements/ZikoUIElement.js

@@ -1,3 +1,6 @@
+import { compose } from "../../__helpers__/index.js";
+import { DomMethods } from "../methods/dom.js";
+import { IndexingMethods } from "../methods/indexing.js";
 import { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
 import { ZikoUIElementStyle } from "../style/index.js";
 import { 
@@ -19,7 +22,7 @@ import {
 } from "../../reactivity/index.js"
 import { Random } from "../../math/index.js";
 import { Str } from "../../data/index.js";
-import { text } from "./text/text.js";
+// import { text } from "./text/text.js";
 class ZikoUIElement {
   constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
@@ -34,6 +37,11 @@ class ZikoUIElement {
       this.target = element.parentElement;
     }
     if(element)this.__ele__ = element;
+    compose(
+      this, 
+      DomMethods,
+      IndexingMethods
+    )
     this.cache = {
       name,
       parent:null,
@@ -99,6 +107,10 @@ class ZikoUIElement {
   get isZikoUIElement(){
     return true;
   }
+  register(){
+
+    return this;
+  }
   get st(){
     return this.cache.style;
   }
@@ -162,75 +174,6 @@ class ZikoUIElement {
     this.length = this.items.length;
     return this;
   }
-  at(index) {
-    return this.items.at(index);
-  }
-  #addItem(adder, pusher, ...ele) {
-    if (this.cache.isFrozzen) {
-      console.warn("You can't append new item to frozzen element");
-      return this;
-    }
-    for (let i = 0; i < ele.length; i++) {
-      if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-      if(ele[i] instanceof Node) ele[i] = new ZikoUIElement(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]);
-      } 
-      else if (ele[i] instanceof Object) {
-        if (ele[i]?.style) this.style(ele[i]?.style);
-        if (ele[i]?.attr) {
-          Object.entries(ele[i].attr).forEach((n) =>
-            this.setAttr("" + n[0], n[1]),
-          );
-        }
-      }
-    }
-    this.maintain();
-    return this;
-  }
-  append(...ele) {
-    this.#addItem("append", "push", ...ele);
-    return this;
-  }
-  prepend(...ele) {
-    this.#addItem("prepend", "unshift", ...ele);
-    return this;
-  }
-  insertAt(index, ...ele) {
-    if (index >= this.element.children.length) this.append(...ele);
-    else
-      for (let i = 0; i < ele.length; i++) {
-        if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-        this.element?.insertBefore(ele[i].element, this.items[index].element);
-        this.items.splice(index, 0, ele[i]);
-      }
-    return this;
-  }
-  remove(...ele) {
-    const remove = (ele) => {
-      if (typeof ele === "number") ele = this.items[ele];
-      if (ele?.isZikoUIElement) this.element?.removeChild(ele.element);
-      this.items = this.items.filter((n) => n !== ele);
-    };
-    for (let i = 0; i < ele.length; i++) remove(ele[i]);
-    for (let i = 0; i < this.items.length; i++)
-      Object.assign(this, { [[i]]: this.items[i] });
-    // Remove from item
-    return this;
-  }
-  forEach(callback) {
-    this.items.forEach(callback);
-    return this;
-  }
-  map(callback) {
-    return this.items.map(callback);
-  }
-  find(condition) {
-    return this.items.filter(condition);
-  }
   filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
     const FilterItems = this.items.filter(condition_callback);
     FilterItems.forEach(if_callback);
@@ -322,41 +265,6 @@ class ZikoUIElement {
   describe(label){
     if(label)this.setAttr("aria-label",label)
   }
-  clear(){
-    this?.items?.forEach(n=>n.unrender());
-    this.element.innerHTML = "";
-    return this;
-  }
-  render(target = this.target) {
-    if(this.isBody)return ;
-    if(target?.isZikoUIElement)target=target.element;
-    this.target=target;
-    this.target?.appendChild(this.element);
-    return this;
-  }
-  unrender(){
-    if(this.cache.parent)this.cache.parent.remove(this);
-    else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
-    return this;
-  }
-  renderAfter(t = 1) {
-    setTimeout(() => this.render(), t);
-    return this;
-  }
-  unrenderAfter(t = 1) {
-    setTimeout(() => this.unrender(), t);
-    return this;
-  }
-  after(ui){
-    if(ui?.isZikoUIElement) ui=ui.element;
-    this.element?.after(ui)
-    return this;
-  }
-  before(ui){
-    if(ui?.isZikoUIElement) ui=ui.element;
-    this.element?.before(ui)
-    return this;
-  }
   animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
     this.element?.animate(keyframe,{duration, iterations, easing});
     return this;
@@ -616,11 +524,5 @@ class ZikoUIElement {
     else globalThis.document.exitFullscreen();
     return this;
   }
-  toPdf(){
-    if(__ZikoPdf__){
-
-    }
-    return this;
-  }
 }
 export default ZikoUIElement;

package/src/ui/methods/dom.js

@@ -0,0 +1,99 @@
+import { text } from "../elements/text/text.js";
+export const DomMethods = {
+  append(...ele) {
+    __addItem__.call(this, "append", "push", ...ele);
+    return this;
+  },
+  prepend(...ele) {
+    this.__addItem__.call(this, "prepend", "unshift", ...ele);
+    return this;
+  },
+  insertAt(index, ...ele) {
+    if (index >= this.element.children.length) this.append(...ele);
+    else
+      for (let i = 0; i < ele.length; i++) {
+        if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+        this.element?.insertBefore(ele[i].element, this.items[index].element);
+        this.items.splice(index, 0, ele[i]);
+      }
+    return this;
+  },
+  remove(...ele) {
+    const remove = (ele) => {
+      if (typeof ele === "number") ele = this.items[ele];
+      if (ele?.isZikoUIElement) this.element?.removeChild(ele.element);
+      this.items = this.items.filter((n) => n !== ele);
+    };
+    for (let i = 0; i < ele.length; i++) remove(ele[i]);
+    for (let i = 0; i < this.items.length; i++)
+      Object.assign(this, { [[i]]: this.items[i] });
+    // Remove from item
+    return this;
+  },
+  clear(){
+    this?.items?.forEach(n=>n.unrender());
+    this.element.innerHTML = "";
+    return this;
+  },
+  render(target = this.target) {
+    if(this.isBody)return ;
+    if(target?.isZikoUIElement)target=target.element;
+    this.target=target;
+    this.target?.appendChild(this.element);
+    return this;
+  },
+  unrender(){
+    if(this.cache.parent)this.cache.parent.remove(this);
+    else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
+    return this;
+  },
+  renderAfter(t = 1) {
+    setTimeout(() => this.render(), t);
+    return this;
+  },
+  unrenderAfter(t = 1) {
+    setTimeout(() => this.unrender(), t);
+    return this;
+  },
+  after(ui){
+    if(ui?.isZikoUIElement) ui=ui.element;
+    this.element?.after(ui)
+    return this;
+  },
+  before(ui){
+    if(ui?.isZikoUIElement) ui=ui.element;
+    this.element?.before(ui)
+    return this;
+  }
+
+};
+
+function __addItem__(adder, pusher, ...ele) {
+  if (this.cache.isFrozzen) {
+    console.warn("You can't append new item to frozzen element");
+    return this;
+  }
+  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]);
+    } else if (ele[i] instanceof Object) {
+      if (ele[i]?.style) this.style(ele[i]?.style);
+      if (ele[i]?.attr) {
+        Object.entries(ele[i].attr).forEach((n) =>
+          this.setAttr("" + n[0], n[1]),
+        );
+      }
+    }
+  }
+  this.maintain();
+  return this;
+}

package/src/ui/methods/indexing.js

@@ -0,0 +1,15 @@
+export const IndexingMethods = {
+  at(index) {
+    return this.items.at(index);
+  },
+  forEach(callback) {
+    this.items.forEach(callback);
+    return this;
+  },
+  map(callback) {
+    return this.items.map(callback);
+  },
+  find(condition) {
+    return this.items.filter(condition);
+  },
+};

package/src/ui/tags/index.js

@@ -1,18 +1,46 @@
 import ZikoUIElement from "../elements/ZikoUIElement.js";
+import { HTMLTags, SVGTags } from "./tags.js";
+const _h=(tag, type, attributes, ...children)=>{
+    const { name, style, ...attrs } = attributes;
+    let element = new ZikoUIElement(tag, name, type);
+    style && element.style(style);
+    attrs && element.setAttr(attrs);
+    children && element.append(...children);
+    return element; 
+}
+const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+
 const tags = new Proxy({}, {
   get(target, prop) {
     if (typeof prop !== 'string') return undefined;
     let tag = prop.replaceAll("_","-").toLowerCase();
-    switch(tag){
-      case "html"  : globalThis?.document?.createElement("html")
-      case "head"  :
-      case "style" :
-      case "link"  :
-      case "meta"  :
-      case "srcipt":
-      case "body"  : return null; break;
-      default : return new ZikoUIElement(tag);
+    if(HTMLTags.includes(tag)) return (...args)=>{
+      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+        let attributes = args.shift()
+        console.log(args)
+        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+      }
+      return new ZikoUIElement(tag).append(...args);
+    }
+    if(SVGTags.includes(tag)) return (...args)=>new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
+    return (...args)=>{
+      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+        let attributes = args.shift()
+        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+      }
+      return new ZikoUIElement(tag).append(...args);
     }
+    // switch(tag){
+    //   case "html"  : globalThis?.document?.createElement("html")
+    //   case "head"  :
+    //   case "style" :
+    //   case "link"  :
+    //   case "meta"  :
+    //   case "srcipt":
+    //   case "body"  : return null; break;
+    //   default : return new ZikoUIElement(tag);
+    // }
   }
 });
 

package/src/ui/tags/tags.js

@@ -0,0 +1,126 @@
+const HTMLTags = [
+  'a',
+  'abb',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hgroup',
+  'hr',
+  'i',
+  'iframe',
+  'img',
+  'ipnut',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'main',
+  'map',
+  'mark',
+  'menu',
+  'meter',
+  'nav',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'search',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'svg',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr'
+];
+
+const SVGTags = [
+    "svg", "g", "defs", "symbol", "use", "image", "switch",
+    "rect", "circle", "ellipse", "line", "polyline", "polygon", "path",
+    "text", "tspan", "textPath", "altGlyph", "altGlyphDef", "altGlyphItem", "glyph", "glyphRef",
+    "linearGradient", "radialGradient", "pattern", "solidColor",
+    "filter", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
+    "feDiffuseLighting", "feDisplacementMap", "feDropShadow", "feFlood", "feFuncA", "feFuncR", "feFuncG", "feFuncB",
+    "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "feSpecularLighting",
+    "feTile", "feTurbulence",
+    "animate", "animateMotion", "animateTransform", "set",
+    "script",
+    "desc", "title", "metadata", "foreignObject"
+  ];
+
+export{
+    HTMLTags,
+    SVGTags
+}