ziko 2.0.0-beta.15.1 → 2.0.0-beta.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "2.0.0-beta.15.1",
+  "version": "2.0.0-beta.16.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",

package/src/dom/UIElement/index.js

@@ -1,9 +1,9 @@
 import { UIElement as UIElementCore } from "../../mini-dom/UIElement/index.js";
 import { register_to_class } from "../../internal-utils/register/register-to-class.js";
-import { 
+import {
   // LifecycleMethods,
   AttrsMethods,
-  DomMethods,
+  // DomMethods,
   // IndexingMethods,
   // StyleMethods,
 } from "../../mini-dom/mixins/index.js";
@@ -14,21 +14,26 @@ import {
   ClickListeners,
   KeyListeners,
   ViewListeners,
-} from '../../events/index.js'
+} from "../../events/index.js";
 import { isStateGetter } from "../../hooks/use-state.js";
-class UIElement extends UIElementCore{
-  constructor({element, name ='', type = 'html', render = __Ziko__.__Config__.default.render, props}={}){
-    super()
+import { text } from "../../mini-dom/text/index.js";
+export class UIElement extends UIElementCore {
+  constructor({
+    element,
+    name = "",
+    type = "html",
+    render = __Ziko__.__Config__.default.render,
+    props,
+  } = {}) {
+    super();
     this.exp = {
-      events : {
-
-      }
-    }
+      events: {},
+    };
     register_to_class(
-      this, 
+      this,
       // LifecycleMethods,
-      AttrsMethods, 
-      DomMethods, 
+      AttrsMethods,
+      // DomMethods,
       // StyleMethods,
       // IndexingMethods,
       PtrListeners,
@@ -37,80 +42,100 @@ class UIElement extends UIElementCore{
       ViewListeners,
     );
 
-    if(element) this.init({element, name, type, render, props});
-  }
-  on(event_name, callback, {details_setter, category = 'global', isCustom = false, preventDefault = false} = {}){
-    if(event_name instanceof Array) event_name.forEach(
-      event => this.on(
-        event, 
-        callback, 
-        {details_setter, category, isCustom, preventDefault}
-      )
-    )
-    if(category && !this.exp.events.hasOwnProperty(category)) this.exp.events[category] = new EventController(this, category);
-    isCustom && this.exp.events[category].cache.customEvents.add(event_name)
+    if (element) this.init({ element, name, type, render, props });
+  }
+  on(
+    event_name,
+    callback,
+    {
+      details_setter,
+      category = "global",
+      isCustom = false,
+      preventDefault = false,
+    } = {},
+  ) {
+    if (event_name instanceof Array)
+      event_name.forEach((event) =>
+        this.on(event, callback, {
+          details_setter,
+          category,
+          isCustom,
+          preventDefault,
+        }),
+      );
+    if (category && !this.exp.events.hasOwnProperty(category))
+      this.exp.events[category] = new EventController(this, category);
+    isCustom && this.exp.events[category].cache.customEvents.add(event_name);
     const EVENT = this.exp.events[category];
-    EVENT.addListener(event_name, (e)=>{
-      if(details_setter) details_setter(EVENT);
-      callback(e)
-    },{
-      preventDefault
-    });
+    EVENT.addListener(
+      event_name,
+      (e) => {
+        if (details_setter) details_setter(EVENT);
+        callback(e);
+      },
+      {
+        preventDefault,
+      },
+    );
     return this;
   }
-  off(event, category = 'global'){
+  off(event, category = "global") {
     this.exp.events[category].removeListener(event);
-    return this
+    return this;
   }
-  get element(){
+  get element() {
     return this.cache.element;
   }
-  get itemsTarget(){
-    return this.cache.itemsTarget; 
+  get itemsTarget() {
+    return this.cache.itemsTarget;
   }
-  get itemsTargetElement(){
+  get itemsTargetElement() {
     return this.itemsTarget.element;
   }
-  setItemsTarget(parent){
+  setItemsTarget(parent) {
     this.cache.itemsTarget = parent;
     this.items = parent.items;
     return this;
   }
-  isInteractive(){
+  isInteractive() {
     return this.cache.isInteractive;
   }
-  useClient(directive){
-    if(!this.cache.isInteractive){
-      this.element.setAttribute('data-hydration-index', globalThis.__Ziko__.__HYDRATION__.index);
+  useClient(directive) {
+    if (!this.cache.isInteractive) {
+      this.element.setAttribute(
+        "data-hydration-index",
+        globalThis.__Ziko__.__HYDRATION__.index,
+      );
       globalThis.__Ziko__.__HYDRATION__.register(() => this.constructor);
       this.cache.isInteractive = true;
     }
-    if(directive)this.element.setAttribute('data-hydration-directive', directive);
+    if (directive)
+      this.element.setAttribute("data-hydration-directive", directive);
     return this;
   }
   // get st(){
   //   return this.cache.style;
   // }
-  get attr(){
+  get attr() {
     return this.cache.attributes;
   }
-  get evt(){
+  get evt() {
     return this.events;
   }
-  get html(){
+  get html() {
     return this.element.innerHTML;
   }
-  get text(){
+  get text() {
     return this.element.textContent;
   }
   // get isBody(){
   //   return this.element === globalThis?.document.body;
   // }
-  get parent(){
+  get parent() {
     return this.cache.parent;
   }
-  get rect(){
-    return this.element.getBoundingClientRect()
+  get rect() {
+    return this.element.getBoundingClientRect();
   }
   // get width(){
   //   return this.element.getBoundingClientRect().width;
@@ -142,19 +167,19 @@ class UIElement extends UIElementCore{
   }
   unmount() {
     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);
+      this.cache.parent.remove(this);
+    } else if (
+      this.target?.children?.length &&
+      [...this.target.children].includes(this.element)
+    )
+      this.target.removeChild(this.element);
     return this;
   }
 
   // Indexing
 
   at(index) {
-  return this.items.at(index);
+    return this.items.at(index);
   }
   forEach(callback) {
     this.items.forEach(callback);
@@ -166,35 +191,104 @@ class UIElement extends UIElementCore{
   find(condition) {
     return this.items.filter(condition);
   }
-  // Styling  
-  style(styles){
-    if(!this.element?.style) return this;
-    for(let key in styles){
+  // Styling
+  style(styles) {
+    if (!this.element?.style) return this;
+    for (let key in styles) {
       const value = styles[key];
-      if(isStateGetter(value)){
-        const getter = value()
-        Object.assign(this.element.style, {[key] : getter.value})
+      if (isStateGetter(value)) {
+        const getter = value();
+        Object.assign(this.element.style, { [key]: getter.value });
         getter._subscribe(
           (newValue) => {
-            Object.assign(this.element.style, {[key] : newValue})
+            Object.assign(this.element.style, { [key]: newValue });
           },
-          // this 
+          // this
         );
-      }
-      else Object.assign(this.element.style, {[key] : value})
+      } else Object.assign(this.element.style, { [key]: value });
     }
     return this;
   }
-  size(width, height){
-    return this.style({width, height})
+  size(width, height) {
+    return this.style({ width, height });
   }
-  hide(){
+  hide() {}
+  show() {}
 
-  }
-  show(){
+  // Dom
 
+  append(...ele) {
+    this.__addItems__("append", "push", ...ele);
+    return this;
   }
+  prepend(...ele) {
+    this.this.__addItems__("prepend", "unshift", ...ele);
+    return this;
+  }
+  insertAt(index, ...ele) {
+    const target = this.itemsTarget;
+    if (index >= target.items.length) return this.append(...ele);
+    for (let i = 0; i < ele.length; i++) {
+      if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+      target.element?.insertBefore(ele[i].element, target.items[index].element);
+      target.items.splice(index, 0, ele[i]);
+    }
+    target.maintain();
+    return this;
+  }
+  remove(...ele) {
+    const remove = (ele) => {
+      if (typeof ele === "number") ele = this.items[ele];
+      if (ele?.isUIElement) this.itemsTarget.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;
+  }
+
+  async __addItem__(adder, pusher, item, referenceNode = null, index = null) {
+    const { element: itemsTargetEl, items } = this.itemsTarget;
+    if (["number", "string"].includes(typeof item)) item = text(item);
+    if (typeof item === "function" && isStateGetter(item)) {
+      const getter = item();
+      item = getter.value;
 
+      getter._subscribe((newValue) => {
+        if (newValue?.isUIElement?.()) {
+          item.element.replaceWith(newValue.element);
+          item = newValue;
+        } else {
+          item.element.textContent = newValue;
+        }
+      });
+    }
+    if (
+      typeof globalThis?.Node === "function" &&
+      item instanceof globalThis.Node
+    )
+      item = new UIElement({element : item});
+    if (item instanceof Promise) item = await item;
+    if (item?.isUINode) {
+      item.cache.parent = this;
+      item.target = itemsTargetEl;
+      if (adder === "insertBefore" && itemsTargetEl)
+        itemsTargetEl.insertBefore(item.element, referenceNode);
+      else if (typeof itemsTargetEl?.[adder] === "function")
+        itemsTargetEl[adder](item.element);
+      if (pusher === "splice" && index !== null) items.splice(index, 0, item);
+      else if (typeof items?.[pusher] === "function") items[pusher](item);
+      return;
+    }
+  }
 
+  async __addItems__(adder, pusher, ...elements) {
+    for (const item of elements) {
+      await this.__addItem__(adder, pusher, item);
+    }
+    this.maintain();
+    return this;
+  }
 }
-export { UIElement }

package/src/dom/tags/index.js

@@ -13,15 +13,17 @@ export const tags = new Proxy({}, {
     if(SVGTags.includes(tag)) type = 'svg';
     if(MathMLTags.includes(tag)) type = 'mathml';
     return (...args) => {
+      const ui = new UIElement({element : tag, name : tag, type});
+      const first = args[0]
       if(args.length === 0) {
-        return new UIElement({element : tag, name : tag, type})
+        return ui
       }
       if(
-        ['string', 'number'].includes(typeof args[0]) 
-        || args[0] instanceof UIElement 
-        || isStateGetter(args[0])
-        || args[0] instanceof HTMLElement
-      ) return new UIElement({element : tag, name : tag, type}).append(...args);
+        ['string', 'number'].includes(typeof first) 
+        || first instanceof UIElement 
+        || isStateGetter(first)
+        || first instanceof HTMLElement
+      ) return ui.append(...args);
       return new UIElement({element : tag, type, props : args.shift()}).append(...args)
     }
   }