ziko 0.42.1 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.42.1",
+  "version": "0.43.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/__ziko__/__state__.js

@@ -3,7 +3,7 @@ export const __State__ = {
     index : import.meta.hot?.data?.__Ziko__?.__State__?.index ?? 0,
     register: function(state){
         console.log({
-            hmr : import.meta.hot?.data.__Ziko__.__State__.index,
+            // hmr : import.meta.hot?.data.__Ziko__.__State__.index,
             index : this.index
         })
         this.store.set(this.index++, state)

package/src/ui/__methods__/style.js

@@ -1,23 +1,23 @@
 import { isStateGetter } from '../../hooks/use-state.js'
 export const StyleMethods = {
-    // style(styles){
-    //     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) => {
-    //                     console.log({newValue})
-    //                     Object.assign(this.element.style, {[key] : newValue})
-    //                 },
-    //                 // this 
-    //             );
-    //         }
-    //         else Object.assign(this.element.style, {[key] : value})
-    //     }
-    //     return this;
-    // },
+    style(styles){
+        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) => {
+                        console.log({newValue})
+                        Object.assign(this.element.style, {[key] : newValue})
+                    },
+                    // this 
+                );
+            }
+            else Object.assign(this.element.style, {[key] : value})
+        }
+        return this;
+    },
     size(width, height){
         return this.style({width, height})
     },

package/src/ui/__utils__/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement.js";
+import { UIElement } from "../constructors/UIElement.js";
 const Id = (a) => document.getElementById(a);
 const Class = (a) => [...document.getElementsByClassName(a)];
 const $=(...selector)=>{

package/src/ui/constructors/UIElement.js

@@ -1,4 +1,4 @@
-import UINode from "./UINode.js";
+import {UINode} from "./UINode.js";
 import { register } from "../../__helpers__/register/index.js";
 import { 
   AttrsMethods,
@@ -7,7 +7,6 @@ import {
   EventsMethodes,
   StyleMethods
 } from "../__methods__/index.js";
-import { isStateGetter } from "../../hooks/use-state.js";
 import { 
   useCustomEvent,
   useSwipeEvent,
@@ -106,24 +105,6 @@ class UIElement extends UINode{
   isZikoUIElement(){
     return true;
   }
-  style(styles){
-    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) => {
-                    console.log({newValue})
-                    Object.assign(this.element.style, {[key] : newValue})
-                },
-                // this 
-            );
-        }
-        else Object.assign(this.element.style, {[key] : value})
-    }
-    return this;
-  }
   get st(){
     return this.cache.style;
   }
@@ -271,4 +252,4 @@ class UIElement extends UINode{
   }
 
 }
-export default UIElement;
+export { UIElement }

package/src/ui/constructors/UINode.js

@@ -1,4 +1,4 @@
-export default class UINode {
+export class UINode {
     constructor(node){
         this.cache = {
             node
@@ -12,4 +12,4 @@ export default class UINode {
     } 
 }
 
-globalThis.node = (node) => new UINode(node);
+// globalThis.node = (node) => new UINode(node);

package/src/ui/flex/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement.js";
+import { UIElement } from "../constructors/UIElement.js";
 class ZikoUIFlex extends UIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
     super({element : tag , name : "Flex"});

package/src/ui/graphics/canvas.js

@@ -1,4 +1,4 @@
-import  UIElement from "../constructors/UIElement.js";
+import {UIElement} from "../constructors/UIElement.js";
 import {Matrix} from "../../math/matrix/Matrix.js"
 class ZikoUICanvas extends UIElement{
     constructor(w,h){

package/src/ui/graphics/svg.js

@@ -1,4 +1,4 @@
-import UIElement  from "../constructors/UIElement.js";
+import {UIElement}  from "../constructors/UIElement.js";
 class ZikoUISvg extends UIElement {
     constructor(w=360,h=300) {
       super("svg","svg");

package/src/ui/grid/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement.js"
+import {UIElement} from "../constructors/UIElement.js"
 class ZikoUIGrid extends UIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
       super({element : tag, name : "Grid"});

package/src/ui/index.js

@@ -1,5 +1,5 @@
-export { default as UIElement } from "./constructors/UIElement.js"
-export { default as UINode } from "./constructors/UINode.js"
+export * from "./constructors/UIElement.js"
+export * from "./constructors/UINode.js"
 export * from './tags/index.js';
 export * from './text/index.js';
 export * from './flex/index.js';

package/src/ui/suspense/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement";
+import {UIElement} from "../constructors/UIElement";
 class ZikoUISuspense extends UIElement{
     constructor(fallback_ui, callback){
         super({element : "div", name : "suspense"})

package/src/ui/tags/index.d.ts.txt

@@ -1,4 +1,4 @@
-import UIElement from "../elements/UIElement.js";
+import {UIElement} from "../elements/UIElement.js";
 interface HtmlTags {
     a: UIElement;
     abbr: UIElement;

package/src/ui/tags/index.js

@@ -1,6 +1,6 @@
-import UIElement from "../constructors/UIElement.js";
+import {UIElement} from "../constructors/UIElement.js";
 import { HTMLTags, SVGTags } from "./tags-list.js";
-import { isStateGetter } from "../../hooks/use-state.js";
+// import { isStateGetter } from "../../hooks/use-state.js";
 const _h=(tag, type, attributes, ...children)=>{
     const { name, style, ...attrs } = attributes;
     let element = new UIElement(tag, name, type);

package/src/ui/text/index.js

@@ -1,4 +1,4 @@
-import UINode from "../constructors/UINode.js";
+import {UINode} from "../constructors/UINode.js";
 class ZikoUIText extends UINode {
     constructor(...value) {
       super("span", "text", false, ...value);

package/src/ui/wrapper/index.js

@@ -1,4 +1,4 @@
-import UIElement from "../constructors/UIElement.js";
+import {UIElement} from "../constructors/UIElement.js";
 class ZikoUIXMLWrapper extends UIElement{
     constructor(XMLContent, type){
         super({element : "div", name : ""})