ziko 0.45.0 → 0.45.2

package/src/ui/constructors/UIElementCore.js

@@ -0,0 +1,235 @@
+import {UINode} from "./UINode.js";
+import {__init__global__, UIStore} from '../../__ziko__/index.js';
+__init__global__()
+class UIElementCore extends UINode{
+  constructor(){
+    super()
+  }
+  init(element, name, type, render, isInteractive = [true, false][Math.floor(2*Math.random())]){
+    this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
+    if(typeof element === "string") {
+      switch(type){
+        case "html" : {
+          element = globalThis?.document?.createElement(element);
+          console.log('1')
+        }; break;
+        case "svg" : {
+          element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
+          console.log('2')
+        }; break;
+        default : throw Error("Not supported")
+      }
+    }
+    else this.target = element?.parentElement;
+    Object.assign(this.cache, {
+      name,
+      isInteractive,
+      parent:null,
+      isBody:false,
+      isRoot:false,
+      isHidden: false,
+      isFrozzen:false,
+      legacyParent : null,
+      attributes: {},
+      filters: {},
+      temp:{}
+    })
+    this.events = {
+      ptr:null,
+      mouse:null,
+      wheel:null,
+      key:null,
+      drag:null,
+      drop:null,
+      click:null,
+      clipboard:null,
+      focus:null,
+      swipe:null,
+      custom:null,
+    }
+    this.observer={
+      resize:null,
+      intersection:null
+    }
+    if(element) Object.assign(this.cache,{element});
+    // useDefaultStyle && this.style({ 
+    //   position: "relative",
+    //   boxSizing:"border-box",
+    //   margin:0,
+    //   padding:0,
+    //   width : "auto",
+    //   height : "auto"
+    //  });
+    this.items = new UIStore();
+    globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
+    element && render && this?.render?.()
+    if(
+      // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
+      // && 
+      // !globalThis.__Ziko__.__Config__.isSSC
+      // && 
+      this.isInteractive()){
+      // this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
+      // this.element.setAttribute('ziko-hydration-index', globalThis.__Ziko__.__HYDRATION__.index)
+      globalThis.__Ziko__.__HYDRATION__.register(() => this)
+    }
+    globalThis.__Ziko__.__UI__.push(this)
+  }
+  get element(){
+    return this.cache.element;
+  }
+    [Symbol.iterator]() {
+    return this.items[Symbol.iterator]();
+  }
+  maintain() {
+    for (let i = 0; i < this.items.length; i++) {
+      Object.defineProperty(this, i, {
+        value: this.items[i],
+        writable: true,
+        configurable: true,
+        enumerable: false 
+        });
+    }
+  }
+  isInteractive(){
+    return this.cache.isInteractive;
+  }
+  isUIElement(){
+    return true;
+  }
+//   get st(){
+//     return this.cache.style;
+//   }
+//   get attr(){
+//     return this.cache.attributes;
+//   }
+//   get evt(){
+//     return this.events;
+//   }
+//   get html(){
+//     return this.element.innerHTML;
+//   }
+//   get text(){
+//     return this.element.textContent;
+//   }
+//   get isBody(){
+//     return this.element === globalThis?.document.body;
+//   }
+//   get parent(){
+//     return this.cache.parent;
+//   }
+//   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;
+//   }
+//   clone(render=false) {
+//     // UI.__proto__=this.__proto__;
+//     // if(this.items.length){
+//     //   const items = [...this.items].map(n=>n.clone());
+//     //   UI.append(...items);
+//     // }
+//     // else UI.element=this.element.cloneNode(true);
+//     // return UI.render(render);
+//   }
+
+//   freeze(freeze){
+//     this.cache.isFrozzen=freeze;
+//     return this;
+//   }
+  // setTarget(tg) {
+  //   if(this.isBody) return ;
+  //   if (tg?.isUIElement) tg = tg.element;
+  //   this.unrender();
+  //   this.target = tg;
+  //   this.render();
+  //   return this;
+  // }
+//   describe(label){
+//     if(label)this.setAttr("aria-label",label)
+//   }
+//   get children() {
+//     return [...this.element.children];
+//   }
+//   get cloneElement() {
+//     return this.element.cloneNode(true);
+//   }
+//   setClasses(...value) {
+//     this.setAttr("class", value.join(" "));
+//     return this;
+//   }
+//   get classes(){
+//     const classes=this.element.getAttribute("class");
+//     return classes===null?[]:classes.split(" ");
+//   }
+//   addClass() {
+//     /*this.setAttr("class", value);
+//         return this;*/
+//   }
+//   setId(id) {
+//     this.setAttr("id", id);
+//     return this;
+//   }
+//   get id() {
+//     return this.element.getAttribute("id");
+//   }
+//   onSwipe(width_threshold, height_threshold,...callbacks){
+//     if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
+//     this.events.swipe.onSwipe(...callbacks);
+//     return this;
+//   }
+  // To Fix
+  // onKeysDown({keys=[],callback}={}){
+  //   if(!this.events.key)this.events.key = useKeyEvent(this);
+  //   this.events.key.handleSuccessifKeys({keys,callback});
+  //   return this;
+  // }
+  // onSelect(...callbacks){
+  //   if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
+  //   this.events.clipboard.onSelect(...callbacks);
+  //   return this;
+  // }
+//   on(event_name,...callbacks){
+//     if(!this.events.custom)this.events.custom = useCustomEvent(this);
+//     this.events.custom.on(event_name,...callbacks);
+//     return this;
+//   }
+//   emit(event_name,detail={}){
+//     if(!this.events.custom)this.events.custom = useCustomEvent(this);
+//     this.events.custom.emit(event_name,detail);
+//     return this;
+//   }
+//   watchAttr(callback){
+//     if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
+//     return this;
+//   }
+//   watchChildren(callback){
+//     if(!this.observer.children)this.observer.children = watchChildren(this,callback);
+//     return this;
+//   }
+//   watchSize(callback){
+//     if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
+//     this.observer.resize.start();
+//     return this;
+//   }
+//   watchIntersection(callback,config){
+//     if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
+//     this.observer.intersection.start();
+//     return this;
+//   }
+
+}
+export { UIElementCore }

package/src/ui/index.js

@@ -3,8 +3,8 @@ export * from "./constructors/UINode.js"
 export * from './tags/index.js';
 export * from './text/index.js';
 export * from './flex/index.js';
-export * from './grid/index.js';
+// export * from './grid/index.js';
 export * from './suspense/index.js';
-export * from './wrapper/index.js';
-export * from './graphics/index.js'
+export * from './wrappers/index.js';
+// export * from './graphics/index.js'
 export * from './web-component/index.js'

package/src/ui/suspense/index.js

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

package/src/ui/tags/index.js

@@ -9,8 +9,8 @@ const _h=(tag, type, attributes, ...children)=>{
     children && element.append(...children);
     return element; 
 }
-const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
-const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+// const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+// const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
 
 const tags = new Proxy({}, {
   get(target, prop) {
@@ -19,16 +19,22 @@ const tags = new Proxy({}, {
     let type ;
     if(HTMLTags.includes(tag)) type = 'html'
     if(SVGTags.includes(tag)) type = 'svg'
+    console.log(type)
     return (...args)=>{
       // Fix undefined
       // console.log(isStateGetter(args[0]))
+      // console.log(!!args)
+      if(args.length === 0) {
+        console.log('length 0')
+        return new UIElement({element : tag, name : tag, type})
+      }
       if(
         ['string', 'number'].includes(typeof args[0]) 
         || args[0] instanceof UIElement 
         || (typeof args[0] === 'function' && args[0]().isStateGetter())
       ) return new UIElement({element : tag, name : tag, type}).append(...args);
       // console.log(args[0])
-      return new UIElement({element : tag}).setAttr(args.shift()).append(...args)
+      return new UIElement({element : tag, type}).setAttr(args.shift()).append(...args)
     }
     // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);
     // return (...args)=>{

package/src/ui/tags/tags-list.js

@@ -86,7 +86,6 @@ const HTMLTags = [
   'sub',
   'summary',
   'sup',
-  'svg',
   'table',
   'tbody',
   'td',

package/src/ui/wrappers/html/index.js

@@ -0,0 +1,26 @@
+import { UIElement } from "../../constructors/UIElement.js";
+
+class UIHTMLWrapper extends UIElement {
+    constructor(content){
+        super({element : 'div', name : 'html_wrappper'})
+        this.element.append(html2dom(content))
+        this.style({
+            display : 'contents'
+        })
+    }
+}
+
+function html2dom(htmlString) {
+    if(globalThis?.DOMParser){
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
+        doc.body.firstChild.style.display = "contents"
+        return doc.body.firstChild;
+    }
+}
+
+const HTMLWrapper = (content) => new UIHTMLWrapper(content)
+export{
+    UIHTMLWrapper,
+    HTMLWrapper
+}

package/src/ui/wrappers/index.js

@@ -0,0 +1,2 @@
+export * from './html/index.js'
+export * from './svg/index.js'

package/src/ui/wrappers/svg/index.js

@@ -0,0 +1,46 @@
+import { UIElement } from "../../constructors/UIElement.js";
+
+class UISVGWrapper extends UIElement {
+    constructor(content){
+        super({element : 'div', name : 'html_wrappper'})
+        this.element.append(svg2dom(content));
+        this.style({
+            display : 'contents'
+        })
+    }
+}
+
+function svg2dom(svgString) {
+  if (typeof DOMParser !== "undefined") {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
+    const svg = doc.documentElement;
+
+    if (svg.nodeName === "parsererror") {
+      throw new Error("Invalid SVG string");
+    }
+    if(svg.hasAttribute('xmlns')) return svg
+    // TO Fix ...
+    const {children, attributes} = svg;
+    const element = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+    for(let {name, value} of attributes){
+      element.setAttribute(name, value)
+    }
+    element.append(...children)
+
+    globalThis.svg = svg
+    globalThis.children = children 
+    globalThis.attributes = attributes
+    globalThis.element = element
+    return element;
+  }
+  throw new Error("DOMParser is not available in this environment");
+}
+
+
+
+const SVGWrapper = (content) => new UISVGWrapper(content)
+export{
+    UISVGWrapper,
+    SVGWrapper
+}

package/src/events/click.js

@@ -1,18 +0,0 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
-class ZikoEventClick extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Click, details_setter, customizer)
-    }
-}
-function details_setter(){
-    if(this.currentEvent==="click") this.dx = 0
-    else this.dx = 1
-    // console.log(this.currentEvent)
-}
-const bindClickEvent = (target, customizer) => new ZikoEventClick(target, customizer)
-
-export{
-    bindClickEvent,
-    ZikoEventClick
-}

package/src/events/clipboard.js

@@ -1,16 +0,0 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
-class ZikoEventClipboard extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Clipboard, details_setter, customizer)
-    }
-}
-function details_setter(){
-
-}
-const bindClipboardEvent = (target, customizer) => new ZikoEventClipboard(target, customizer)
-
-export{
-    bindClipboardEvent,
-    ZikoEventClipboard
-}

package/src/events/drag.js

@@ -1,16 +0,0 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
-class ZikoEventDrag extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Drag, details_setter, customizer)
-    }
-}
-function details_setter(){
-
-}
-const bindDragEvent = (target, customizer) => new ZikoEventDrag(target, customizer)
-
-export{
-    bindDragEvent,
-    ZikoEventDrag
-}

package/src/events/focus.js

@@ -1,16 +0,0 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
-class ZikoEventFocus extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Focus, details_setter, customizer)
-    }
-}
-function details_setter(){
-
-}
-const bindFocusEvent = (target, customizer) => new ZikoEventFocus(target, customizer)
-
-export{
-    bindFocusEvent,
-    ZikoEventFocus
-}

package/src/events/mouse.js

@@ -1,16 +0,0 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
-class ZikoEventMouse extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Mouse, details_setter, customizer)
-    }
-}
-function details_setter(){
-
-}
-const bindMouseEvent = (target, customizer) => new ZikoEventMouse(target, customizer)
-
-export{
-    bindMouseEvent,
-    ZikoEventMouse
-}

package/src/events/wheel.js

@@ -1,16 +0,0 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
-class ZikoEventWheel extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Wheel, details_setter, customizer)
-    }
-}
-function details_setter(){
-
-}
-const bindWheelEvent = (target, customizer) => new ZikoEventWheel(target, customizer)
-
-export{
-    bindWheelEvent,
-    ZikoEventWheel
-}

package/src/ui/wrapper/index.js

@@ -1,42 +0,0 @@
-import {UIElement} from "../constructors/UIElement.js";
-class ZikoUIXMLWrapper extends UIElement{
-    constructor(XMLContent, type){
-        super({element : "div", name : ""})
-        this.element.append(type==="svg"?svg2dom(XMLContent):html2dom(XMLContent))
-    }
-}
-function html2dom(htmlString) {
-    if(globalThis?.DOMParser){
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
-        doc.body.firstChild.style.display = "contents"
-        return doc.body.firstChild;
-    }
-  }
-function svg2dom(svgString) {
-    if(globalThis?.DOMParser){
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(svgString.replace(/\s+/g, ' ').trim(), 'image/svg+xml');
-        return doc.documentElement; // SVG elements are usually at the root
-    }
-}
-class ZikoUIHTMLWrapper extends ZikoUIXMLWrapper{
-    constructor(HTMLContent){
-        super(HTMLContent, "html")
-    }
-}
-class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
-    constructor(SVGContent){
-        super(SVGContent, "svg")
-    }
-}
-const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
-const SVGWrapper = (SVGContent) => new ZikoUISVGWrapper(SVGContent);
-
-export{
-    ZikoUIXMLWrapper,
-    ZikoUIHTMLWrapper,
-    ZikoUISVGWrapper,
-    HTMLWrapper,
-    SVGWrapper
-}