ziko 2.0.0-beta.13 → 2.0.0-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.15",
   "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/mini-dom/mixins/attrs.js

@@ -1,8 +1,8 @@
 import { isStateGetter } from "../../hooks/use-state.js";
-// import { 
-//   is_camelcase,
-//   camel2hyphencase
-//  } from '../../../data/string/index.js'
+import { 
+  is_camelcase,
+  camel2hyphencase
+ } from '../../string/index.js'
 
 export function setAttr(name, value) {
   if(name instanceof Object){
@@ -32,65 +32,16 @@ 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 
-//         );
-//     }
-//     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
+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 
         );
-
-        return;
     }
-
-    // Normal attribute
-    this.element.setAttribute(name, value);
-
-    this.attr[name] = value;
-    this.cache.attributes[name] = value;
-}
+    else this.element?.setAttribute(name, value)
+    // Object.assign(this.cache.attributes, {[name]:value});   
+}

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

@@ -62,12 +62,17 @@ export async function __addItem__(adder, pusher, item, referenceNode = null, ind
   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
-    );
-  }
+    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 this.constructor(item);
   if (item instanceof Promise) item = await item;