ziko 0.40.0 → 0.41.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Aug 19 2025 09:41:09 GMT+0100 (UTC+01:00)
+  Date : Tue Aug 19 2025 12:50:26 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1293,7 +1293,7 @@
 
     };
 
-    function __addItem__(adder, pusher, ...ele) {
+    async function __addItem__(adder, pusher, ...ele) {
       if (this.cache.isFrozzen) {
         console.warn("You can't append new item to frozzen element");
         return this;
@@ -1319,6 +1319,13 @@
             ele[i].target = this.element;
             this.items[pusher](ele[i]);
         } 
+        else if(ele[i] instanceof Promise){
+          const UIEle = await ele[i];
+          UIEle.cache.parent = this;
+          this.element?.[adder](UIEle.element);
+          UIEle.target = this.element;
+          this.items[pusher](UIEle);
+        }
         else if (ele[i] instanceof Object) {
           if (ele[i]?.style) this.style(ele[i]?.style);
           if (ele[i]?.attr) {

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Aug 19 2025 09:41:09 GMT+0100 (UTC+01:00)
+  Date : Tue Aug 19 2025 12:50:26 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1287,7 +1287,7 @@ const DomMethods = {
 
 };
 
-function __addItem__(adder, pusher, ...ele) {
+async function __addItem__(adder, pusher, ...ele) {
   if (this.cache.isFrozzen) {
     console.warn("You can't append new item to frozzen element");
     return this;
@@ -1313,6 +1313,13 @@ function __addItem__(adder, pusher, ...ele) {
         ele[i].target = this.element;
         this.items[pusher](ele[i]);
     } 
+    else if(ele[i] instanceof Promise){
+      const UIEle = await ele[i];
+      UIEle.cache.parent = this;
+      this.element?.[adder](UIEle.element);
+      UIEle.target = this.element;
+      this.items[pusher](UIEle);
+    }
     else if (ele[i] instanceof Object) {
       if (ele[i]?.style) this.style(ele[i]?.style);
       if (ele[i]?.attr) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.40.0",
+  "version": "0.41.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/reactivity/index.js

@@ -1,12 +1,3 @@
-import * as Events from "./events";
-import * as Observer from "./observer"
-import * as Hooks from "./hooks"
-const Reactivity={
-    ...Events,
-    ...Observer,
-    ...Hooks,
-}
 export * from "./events";
 export * from "./observer";
 export * from "./hooks";
-export default Reactivity;

package/src/ui/__methods__/dom.js

@@ -68,7 +68,7 @@ export const DomMethods = {
 
 };
 
-function __addItem__(adder, pusher, ...ele) {
+async function __addItem__(adder, pusher, ...ele) {
   if (this.cache.isFrozzen) {
     console.warn("You can't append new item to frozzen element");
     return this;
@@ -94,6 +94,13 @@ function __addItem__(adder, pusher, ...ele) {
         ele[i].target = this.element;
         this.items[pusher](ele[i]);
     } 
+    else if(ele[i] instanceof Promise){
+      const UIEle = await ele[i]
+      UIEle.cache.parent = this;
+      this.element?.[adder](UIEle.element);
+      UIEle.target = this.element;
+      this.items[pusher](UIEle)
+    }
     else if (ele[i] instanceof Object) {
       if (ele[i]?.style) this.style(ele[i]?.style);
       if (ele[i]?.attr) {

package/src/ui/index.js

@@ -6,4 +6,5 @@ export * from './flex/index.js';
 export * from './grid/index.js';
 export * from './suspense/index.js';
 export * from './wrapper/index.js';
-export * from './graphics/index.js'
+export * from './graphics/index.js'
+export * from './web-component/index.js'

package/src/ui/web-component/index.js

@@ -0,0 +1,33 @@
+export function defineWC(name, UIElement, props = {}, { mode = 'open'} = {}){
+    globalThis.customElements?.define(
+        name,
+        class extends HTMLElement{
+            static observedAttributes = ['style',...Object.keys(props)];
+            constructor(){
+                super()
+                this.attachShadow({ mode });
+                this.props = {};
+                this.PropsMask = {
+                    ...props,
+                    ...{
+                        style : { type : Object}
+                    }
+                }
+            }
+            connectedCallback(){
+                this.render()
+                console.log(this.props)   
+            }
+            render(){
+                this.shadowRoot.innerHTML = ''
+                this.UIElement = UIElement(this.props);
+                this.UIElement.setTarget(this.shadowRoot)
+            }
+            attributeChangedCallback(name, _, newValue) {
+                Object.assign(this.props, {[name] : this.PropsMask[name].type(newValue)});
+                // if(name === "style") this.
+                this.render()
+            }
+        }
+    )
+}