ziko 2.0.0-beta.11 → 2.0.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "2.0.0-beta.11",
+  "version": "2.0.0-beta.12",
   "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,11 +1,11 @@
 import { UIElement as UIElementCore } from "../../mini-dom/UIElement/index.js";
 import { register_to_class } from "../../internal-utils/register/register-to-class.js";
 import { 
-  LifecycleMethods,
+  // LifecycleMethods,
   AttrsMethods,
   DomMethods,
-  IndexingMethods,
-  StyleMethods,
+  // IndexingMethods,
+  // StyleMethods,
 } from "../../mini-dom/mixins/index.js";
 
 import {
@@ -15,6 +15,7 @@ import {
   KeyListeners,
   ViewListeners,
 } 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()
@@ -25,11 +26,11 @@ class UIElement extends UIElementCore{
     }
     register_to_class(
       this, 
-      LifecycleMethods,
+      // LifecycleMethods,
       AttrsMethods, 
       DomMethods, 
-      StyleMethods,
-      IndexingMethods,
+      // StyleMethods,
+      // IndexingMethods,
       PtrListeners,
       ClickListeners,
       KeyListeners,
@@ -57,7 +58,7 @@ class UIElement extends UIElementCore{
     });
     return this;
   }
-  _off(event, category = 'global'){
+  off(event, category = 'global'){
     this.exp.events[category].removeListener(event);
     return this
   }
@@ -108,24 +109,92 @@ class UIElement extends UIElementCore{
   get parent(){
     return this.cache.parent;
   }
-  get width(){
-    return this.element.getBoundingClientRect().width;
+  get rect(){
+    return this.element.getBoundingClientRect()
   }
-  get height(){
-    return this.element.getBoundingClientRect().height;
+  // get width(){
+  //   return this.element.getBoundingClientRect().width;
+  // }
+  // get height(){
+  //   return this.element.getBoundingClientRect().height;
+  // }
+  // get top(){
+  //   return this.element.getBoundingClientRect().top;
+  // }
+  // get right(){
+  //   return this.element.getBoundingClientRect().right;
+  // }
+  // get bottom(){
+  //   return this.element.getBoundingClientRect().bottom;
+  // }
+  // get left(){
+  //   return this.element.getBoundingClientRect().left;
+  // }
+
+  // Lifecycle
+
+  mount(target = this.target, delay = 0) {
+    if (this.isBody) return this;
+    if (target?.isUIElement) target = target.element;
+    this.target = target;
+    this.target?.appendChild(this.element);
+    return this;
+  }
+  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);
+    return this;
   }
-  get top(){
-    return this.element.getBoundingClientRect().top;
+
+  // Indexing
+
+  at(index) {
+  return this.items.at(index);
   }
-  get right(){
-    return this.element.getBoundingClientRect().right;
+  forEach(callback) {
+    this.items.forEach(callback);
+    return this;
   }
-  get bottom(){
-    return this.element.getBoundingClientRect().bottom;
+  map(callback) {
+    return this.items.map(callback);
+  }
+  find(condition) {
+    return this.items.filter(condition);
+  }
+  // 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})
+        getter._subscribe(
+          (newValue) => {
+            Object.assign(this.element.style, {[key] : newValue})
+          },
+          // this 
+        );
+      }
+      else Object.assign(this.element.style, {[key] : value})
+    }
+    return this;
   }
-  get left(){
-    return this.element.getBoundingClientRect().left;
+  size(width, height){
+    return this.style({width, height})
   }
+  hide(){
+
+  }
+  show(){
+
+  }
+
 
 }
 export { UIElement }

package/src/dom/UIElement/utils.js

@@ -0,0 +1,93 @@
+import { text } from "../../mini-dom/text/index.js";
+import { isStateGetter } from "../../hooks/use-state.js";
+// export function append(...ele) {
+//   __addItems__.call(this, "append", "push", ...ele);
+//   return this;
+// }
+// export function prepend(...ele) {
+//   this.__addItems__.call(this, "prepend", "unshift", ...ele);
+//   return this;
+// }
+// export function 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;
+// }
+// export function 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;
+// }
+// export function clear(){
+//   this?.items?.forEach(n=>n.unmount());
+//   this.itemsTarget.element.innerHTML = '';
+//   return this;
+// }
+// export function replaceElementWith(new_element){
+//     this.cache.element.replaceWith(new_element)
+//     this.cache.element = new_element;
+//     // To do : Dispose Events and States 
+//     return this
+// }
+// export function after(ui){
+//   if(ui?.isUIElement) ui = ui.element;
+//   this.itemsTarget.element?.after(ui)
+//   return this;
+// }
+// export function before(ui){
+//   if(ui?.isUIElement) ui = ui.element;
+//   this.itemsTarget.element?.before(ui)
+//   return this;
+// }
+
+export async function __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 = text(getter.value);
+    getter._subscribe(
+      (newValue) => { item.element.textContent = newValue; },
+      item
+    );
+  }
+  if (typeof globalThis?.Node === "function" && item instanceof globalThis.Node)
+    item = new this.constructor(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;
+  }
+}
+
+export async function __addItems__(adder, pusher, ...elements) {
+  for (const item of elements) {
+    await __addItem__(adder, pusher, item);
+  }
+  this.maintain();
+  return this;
+}

package/src/mini-dom/mixins/attrs.js

@@ -32,16 +32,65 @@ export function setContentEditable(bool = true) {
 }
 
 
-export function _set_attrs_(name, value){
-    if(globalThis.SVGAElement && this.element instanceof globalThis.SVGAElement) name = is_camelcase(name) ? 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 
+// export function _set_attrs_(name, value){
+//     if(globalThis.SVGAElement && this.element instanceof globalThis.SVGAElement) name = is_camelcase(name) ? 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});   
+// }
+
+function _set_attrs_(name, value) {
+    if (!this?.element || name == null)
+        return;
+    // Normalize SVG attribute names
+    if (
+        globalThis.SVGAElement &&
+        this.element instanceof globalThis.SVGAElement
+    ) {
+        name = is_camelcase(name)
+            ? camel2hyphencase(name)
+            : name;
+    }
+
+    // Ensure internal attribute storage exists
+    this.attr ??= {};
+    this.cache ??= {};
+    this.cache.attributes ??= {};
+
+    // Skip unchanged attributes
+    if (
+        Object.prototype.hasOwnProperty.call(this.attr, name) &&
+        this.attr[name] === value
+    ) {
+        return;
+    }
+
+    // Reactive/state attribute
+    if (isStateGetter(value)) {
+        const state = value();
+
+        state?._subscribe(
+            (newValue) => {
+                this.element?.setAttribute(name, newValue);
+                this.cache.attributes[name] = newValue;
+                this.attr[name] = newValue;
+            },
+            this
         );
+
+        return;
     }
-    else this.element?.setAttribute(name, value)
-    Object.assign(this.cache.attributes, {[name]:value});   
-}
+
+    // Normal attribute
+    this.element.setAttribute(name, value);
+
+    this.attr[name] = value;
+    this.cache.attributes[name] = value;
+}

package/src/string/converters/index.js

@@ -3,10 +3,10 @@ export const camel2snakecase = (text = '') => text.replace(/[A-Z]/g, match => '_
 export const camel2pascalcase = (text = '') => text.charAt(0).toUpperCase() + text.slice(1);
 export const camel2constantcase = (text = '') => text.replace(/[A-Z]/g, match => '_' + match).toUpperCase();
 
-export const pascal2snakecase = (text = '') => text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match.toLowerCase() : match.toLowerCase());
-export const pascal2hyphencase = (text = '') => text.replace(/([A-Z])/g, (match, offset) => offset ? '-' + match.toLowerCase() : match.toLowerCase());
+export const pascal2snakecase = (text = '') => text.replace(/([A-Z])/g, (match, _, offset) => offset ? '_' + match.toLowerCase() : match.toLowerCase());
+export const pascal2hyphencase = (text = '') => text.replace(/([A-Z])/g, (match, _, offset) => offset ? '-' + match.toLowerCase() : match.toLowerCase());
+export const pascal2constantcase = (text = '') => text.replace(/([A-Z])/g, (match, _, offset) => offset ? '_' + match : match).toUpperCase();
 export const pascal2camelcase = (text = '') => text.charAt(0).toLowerCase() + text.slice(1);
-export const pascal2constantcase = (text = '') => text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match : match).toUpperCase();
 
 export const snake2camelcase = (text = '') => text.replace(/(_\w)/g, match => match[1].toUpperCase());
 export const snake2hyphencase = (text = '') => text.replace(/_/g, "-");