ziko 0.0.29 → 0.0.31

package/src/{reactivity/events-exp → events}/key.js

@@ -19,9 +19,9 @@ function details_setter(){
 
     }
 }
-const __useKeyEvent = (target, customizer) => new ZikoEventKey(target, customizer)
+const bindKeyEvent = (target, customizer) => new ZikoEventKey(target, customizer)
 
 export{
-    __useKeyEvent,
+    bindKeyEvent,
     ZikoEventKey
 }

package/src/events/mouse.js

@@ -0,0 +1,16 @@
+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/{reactivity/events-exp → events}/pointer.js

@@ -16,7 +16,7 @@ function details_setter(){
         case "pointermove" : {
             this.mx = parseInt(this.event.offsetX);
             this.my = parseInt(this.event.offsetY);
-            this.isMove = true
+            this.isMoving = true
         }; break;
         case "pointerup" : {
             this.ux = parseInt(this.event.offsetX);
@@ -39,10 +39,9 @@ function details_setter(){
     // else this.dx = 1
     // console.log(this.currentEvent)
 }
-const __usePointerEvent = (target, customizer) => new ZikoEventPointer(target, customizer)
+const bindPointerEvent = (target, customizer) => new ZikoEventPointer(target, customizer)
 
-globalThis.expPointer = __usePointerEvent
 export{
-    __usePointerEvent,
+    bindPointerEvent,
     ZikoEventPointer
 }

package/src/events/touch.js

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

package/src/events/types/__Shared__.d.ts

@@ -0,0 +1,155 @@
+export type EventCustomizer = ((this: __ZikoEvent__) => void) | ((ctx: __ZikoEvent__) => void);
+
+export type EventMethodesBinder<
+  EventKeys extends string,
+  InstanceType
+> = {
+  [K in EventKeys as `on${K}`]: (...callbacks: ((ctx: InstanceType) => void)[]) => InstanceType
+};
+
+export type Callback<InstanceType> = (ctx: InstanceType) => void;
+
+export interface ZikoEventStream {
+  enabled: Record<string, boolean>;
+  clear: Record<string, boolean>;
+  history: Record<string, any[]>;
+  t0?: number;
+}
+
+export interface ZikoEventCache {
+  currentEvent: string | null;
+  event: Event | null;
+  options: Record<string, AddEventListenerOptions>;
+  preventDefault: Record<string, boolean>;
+  stopPropagation: Record<string, boolean>;
+  stopImmediatePropagation: Record<string, boolean>;
+  event_flow: Record<string, unknown>;
+  paused: Record<string, boolean>;
+  stream: ZikoEventStream;
+  callbacks: Record<string, ((e: any) => void)[]>;
+  __controllers__: Record<string, (e: Event) => void>;
+}
+
+export declare class __ZikoEvent__ {
+  constructor(
+    target: any,
+    Events: string[],
+    details_setter?: (this: __ZikoEvent__) => void,
+    customizer?: EventCustomizer
+  );
+
+  target: any;
+  cache: ZikoEventCache;
+
+  get targetElement(): HTMLElement | null;
+  get isParent(): boolean;
+  get item(): any;
+  get currentEvent(): string | null;
+  get event(): Event | null;
+
+  _register_events(
+    Events: string[] | undefined,
+    details_setter: (e: this) => any,
+    customizer: (e: this) => any, // To Check
+    REGISTER_METHODES?: boolean
+  ): this;
+
+  setTarget(UI: any): this;
+
+  preventDefault(
+    overrides?: Partial<Record<string, boolean>>,
+    defaultValue?: boolean | "default"
+  ): this;
+
+  stopPropagation(
+    overrides?: Partial<Record<string, boolean>>,
+    defaultValue?: boolean | "default"
+  ): this;
+
+  stopImmediatePropagation(
+    overrides?: Partial<Record<string, boolean>>,
+    defaultValue?: boolean | "default"
+  ): this;
+
+  setEventOptions(
+    event: string,
+    options: AddEventListenerOptions
+  ): this;
+
+  pause(
+    overrides?: Partial<Record<string, boolean>>,
+    defaultValue?: boolean | "default"
+  ): this;
+
+  resume(
+    overrides?: Partial<Record<string, boolean>>,
+    defaultValue?: boolean | "default"
+  ): this;
+
+  stream(
+    overrides?: Partial<Record<string, boolean>>,
+    defaultValue?: boolean | "default"
+  ): this;
+
+  clear(): this;
+
+  dispose(
+    overrides?: Partial<Record<string, boolean>>,
+    defaultValue?: boolean | "default"
+  ): this;
+
+  // Internal
+  protected __handle(
+    event: string,
+    handler: EventListenerOrEventListenerObject,
+    options?: AddEventListenerOptions,
+    dispose?: any
+  ): this;
+
+  protected __onEvent(
+    event: string,
+    options?: AddEventListenerOptions,
+    dispose?: any,
+    ...callbacks: ((ctx: this) => void)[]
+  ): this;
+}
+// export type ClickEventKeys = 
+//         | 'Click'
+//         | 'DblClick';
+
+// export type PointerEventKeys =
+//         | 'PtrMove'
+//         | 'PtrDown'
+//         | 'PtrUp'
+//         | 'PtrLeave'
+//         | 'PtrEnter'
+//         | 'PtrOut'
+//         | 'PtrCancel'
+
+// export type MouseEventKeys = 
+//         | 'MouseMove'
+//         | 'MouseDown';
+// export type TouchEventKeys = 
+//         | 'ToucMove'
+//         | 'ToucDown';
+// export type KeyEventKeys = 
+//         | 'keyDown'
+//         | 'keyPress'
+//         | 'keyUs';
+// export type ClipboardEventKeys = 
+//         | 'Copy'
+//         | 'Cut'
+//         | 'Paste';
+// export type FocusEventKeys = 
+//         | 'focus'
+//         | 'blur';
+// export type DragEventKeys = 
+//         | 'Drag'
+//         | 'DragStart'
+//         | 'DragEnd'
+//         | 'Drop';        
+// export type MediaEventKeys = 
+//         | '__';
+// export type HashEventKeys = 
+//         | 'HashChange'
+  

package/src/events/types/clipboard.d.ts

@@ -0,0 +1,20 @@
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import type { Callback, ClipboardEventKeys } from './__Shared__.js';
+import { ZikoUIElement } from "../../ui/index.js";
+
+declare class ZikoEventClipboard extends __ZikoEvent__ {
+  constructor(target: any, customizer?: Function);
+
+  // Explicitly declare the dynamic methods to get editor support
+    onCopy(...callbacks: Callback<ZikoEventClipboard>[]): this;
+    onCut(...callbacks: Callback<ZikoEventClipboard>[]): this;
+    onPaste(...callbacks: Callback<ZikoEventClipboard>[]): this;
+
+}
+
+declare const bindClipboardEvent: (target: ZikoUIElement, customizer?: Function) => ZikoEventClipboard;
+
+export {
+  ZikoEventClipboard,
+  bindClipboardEvent,
+};

package/src/events/types/focus.d.ts

@@ -0,0 +1,19 @@
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import type { Callback } from './__Shared__.js';
+import { ZikoUIElement } from "../../ui/index.js";
+
+declare class ZikoEventFocus extends __ZikoEvent__ {
+  constructor(target: any, customizer?: Function);
+
+  // Explicitly declare the dynamic methods to get editor support
+    onFocus(...callbacks: Callback<ZikoEventFocus>[]): this;
+    onBlur(...callbacks: Callback<ZikoEventFocus>[]): this;
+
+}
+
+declare const bindFocusEvent: (target: ZikoUIElement, customizer?: Function) => ZikoEventFocus;
+
+export {
+  ZikoEventFocus,
+  bindFocusEvent,
+};

package/src/events/types/pointer.d.ts

@@ -0,0 +1,45 @@
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import type { EventMethodesBinder, Callback, PointerEventKeys } from './__Shared__.js';
+import { ZikoUIElement } from "../../ui/index.js";
+
+type PointerEventMethodesBinder = EventMethodesBinder<PointerEventKeys, ZikoEventPointer>;
+
+declare class ZikoEventPointer extends __ZikoEvent__ implements PointerEventMethodesBinder {
+  constructor(target: any, customizer?: Function);
+
+  isDown: boolean;
+
+  dx?: number;
+  dy?: number;
+
+  mx?: number;
+  my?: number;
+  isMoving?: boolean;
+
+  ux?: number;
+  uy?: number;
+
+  swippe?: {
+    h: "left" | "right" | "none";
+    v: "top" | "bottom" | "none";
+    delta_x: number;
+    delta_y: number;
+  };
+
+  // Explicitly declare the dynamic methods to get editor support
+    onPtrMove(...callbacks: Callback<ZikoEventPointer>[]): this;
+    onPtrDown(...callbacks: Callback<ZikoEventPointer>[]): this;
+    onPtrUp(...callbacks: Callback<ZikoEventPointer>[]): this;
+    onPtrLeave(...callbacks: Callback<ZikoEventPointer>[]): this;
+    onPtrEnter(...callbacks: Callback<ZikoEventPointer>[]): this;
+    onPtrOut(...callbacks: Callback<ZikoEventPointer>[]): this;
+    onPtrCancel(...callbacks: Callback<ZikoEventPointer>[]): this;
+
+}
+
+declare const bindPointerEvent: (target: ZikoUIElement, customizer?: Function) => ZikoEventPointer;
+
+export {
+  ZikoEventPointer,
+  bindPointerEvent,
+};

package/src/events/wheel.js

@@ -0,0 +1,16 @@
+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/index.js

@@ -1,19 +1,19 @@
-import { __ExtractAll__,__RemoveAll__ } from "./__helpers__";
-import Math from "./math";
-import UI from "./ui";
-import Time from "./time";
-import Data from "./data";
-import Reactivity from "./reactivity";
-import Graphics from "./graphics";
-import App,{__UI__,__HYDRATION_MAP__, __Config__, __CACHE__, defineParamsGetter} from "./app";
+import { __ExtractAll__,__RemoveAll__ } from "./__helpers__/index.js";
+import Math from "./math/index.js";
+import UI from "./ui/index.js";
+import Time from "./time/index.js";
+import Data from "./data/index.js";
+import Reactivity from "./reactivity/index.js";
+import Graphics from "./graphics/index.js";
+import App,{__UI__,__HYDRATION_MAP__, __Config__, __CACHE__, defineParamsGetter, __HYDRATION__} from "./app";
 
-export * from "./math";
-export * from "./ui";
-export * from "./time";
-export * from "./data";
-export * from "./reactivity"
-export * from "./graphics";
-export * from "./app";
+export * from "./math/index.js";
+export * from "./ui/index.js";
+export * from "./time/index.js";
+export * from "./data/index.js";
+export * from "./reactivity/index.js"
+export * from "./graphics/index.js";
+export * from "./app/index.js";
 
 [
     App,
@@ -45,6 +45,7 @@ if ( globalThis.__Ziko__ ) {
 		globalThis.__Ziko__={
             ...Ziko,
             __UI__,
+            __HYDRATION__,
             __HYDRATION_MAP__,
             __Config__,
             __CACHE__,

package/src/reactivity/events/__note__

@@ -0,0 +1 @@
+Should removed

package/src/reactivity/index.js

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

package/src/ui/elements/ZikoUIElement.js

@@ -65,7 +65,7 @@ class ZikoUIElement {
       intersection:null
     }
     this.uuid = `${this.cache.name}-${Random.string(16)}`
-    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index() 
+    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
     this.cache.style.linkTo(this);
     useDefaultStyle && this.style({ 
       position: "relative",
@@ -78,14 +78,24 @@ class ZikoUIElement {
     this.items = [];
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && globalThis.__Ziko__.__Config__.default.render && this.render()
-    this.setAttr("data-ui-index", this.ui_index);
-    if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
-      globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this)
-  }
+    if(
+      // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
+      // && 
+      // !globalThis.__Ziko__.__Config__.isSSC
+      // && 
+      this.isInteractive()
+    ){
+      this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
+      globalThis.__Ziko__.__HYDRATION__.map.set(globalThis.__Ziko__.__HYDRATION__.index, ()=>this);
+      globalThis.__Ziko__.__HYDRATION__.increment()
+    }
   }
   get element(){
     return this.__ele__;
   }
+  isInteractive(){
+    return [true, false][Math.floor(2*Math.random())];
+  }
   get isZikoUIElement(){
     return true;
   }

package/src/ui/elements/embaded/html.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement";
+import ZikoUIElement from "../ZikoUIElement.js";
 
 class ZikoUIHtmlViewer extends ZikoUIElement{
     constructor(src, title){

package/src/ui/elements/embaded/youtube.js

@@ -1,5 +1,5 @@
-import ZikoUIElement from "../ZikoUIElement";
-import { Str } from "../../../../data";
+import ZikoUIElement from "../ZikoUIElement.js";
+import { Str } from "../../../../data.js";
 class ZikoUIYoutubePlayer extends ZikoUIElement{
     constructor(src, title){
         super("iframe", "YoutubePlayer");

package/src/ui/elements/grid/index.js

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

package/src/ui/index.js

@@ -1,24 +1,26 @@
-export * from "./elements/text";
-export * from "./elements/list";
-export * from "./elements/io";
-export * from "./elements/media";
-export * from "./elements/table";
-export * from "./elements/semantic";
-export * from "./elements/misc";
-export * from "./elements/flex";
-export * from "./elements/grid";
+export * from "./elements/text/index.js";
+export * from "./elements/list/index.js";
+export * from "./elements/io/index.js";
+export * from "./elements/media/index.js";
+export * from "./elements/table/index.js";
+export * from "./elements/semantic/index.js";
+export * from "./elements/misc/index.js";
+export * from "./elements/flex/index.js";
+export * from "./elements/grid/index.js";
+export * from "./tags/index.js"
 
-import * as Text from "./elements/text";
-import * as List from "./elements/list";
-import * as Io from "./elements/io";
-import * as Media from "./elements/media";
-import * as Table from "./elements/table";
-import * as Semantic from "./elements/semantic";
-import * as Misc from "./elements/misc";
-import * as Flex from "./elements/flex";
-import * as Grid from "./elements/grid";
+import * as Text from "./elements/text/index.js";
+import * as List from "./elements/list/index.js";
+import * as Io from "./elements/io/index.js";
+import * as Media from "./elements/media/index.js";
+import * as Table from "./elements/table/index.js";
+import * as Semantic from "./elements/semantic/index.js";
+import * as Misc from "./elements/misc/index.js";
+import * as Flex from "./elements/flex/index.js";
+import * as Grid from "./elements/grid/index.js";
 
-import ZikoUIElement from "./elements/ZikoUIElement";
+
+import ZikoUIElement from "./elements/ZikoUIElement.js";
 
 export{
     ZikoUIElement

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

@@ -0,0 +1,144 @@
+import ZikoUIElement from "../elements/ZikoUIElement.js";
+interface HtmlTags {
+    a: ZikoUIElement;
+    abbr: ZikoUIElement;
+    address: ZikoUIElement;
+    area: ZikoUIElement;
+    article: ZikoUIElement;
+    aside: ZikoUIElement;
+    audio: ZikoUIElement;
+    b: ZikoUIElement;
+    base: ZikoUIElement;
+    bdi: ZikoUIElement;
+    bdo: ZikoUIElement;
+    blockquote: ZikoUIElement;
+    body: ZikoUIElement;
+    br: ZikoUIElement;
+    button: ZikoUIElement;
+    canvas: ZikoUIElement;
+    caption: ZikoUIElement;
+    cite: ZikoUIElement;
+    code: ZikoUIElement;
+    col: ZikoUIElement;
+    colgroup: ZikoUIElement;
+    data: ZikoUIElement;
+    datalist: ZikoUIElement;
+    dd: ZikoUIElement;
+    del: ZikoUIElement;
+    details: ZikoUIElement;
+    dfn: ZikoUIElement;
+    dialog: ZikoUIElement;
+    div: ZikoUIElement;
+    dl: ZikoUIElement;
+    dt: ZikoUIElement;
+    em: ZikoUIElement;
+    embed: ZikoUIElement;
+    fieldset: ZikoUIElement;
+    figcaption: ZikoUIElement;
+    figure: ZikoUIElement;
+    footer: ZikoUIElement;
+    form: ZikoUIElement;
+    h1: ZikoUIElement;
+    h2: ZikoUIElement;
+    h3: ZikoUIElement;
+    h4: ZikoUIElement;
+    h5: ZikoUIElement;
+    h6: ZikoUIElement;
+    head: ZikoUIElement;
+    header: ZikoUIElement;
+    hgroup: ZikoUIElement;
+    hr: ZikoUIElement;
+    html: ZikoUIElement;
+    i: ZikoUIElement;
+    iframe: ZikoUIElement;
+    img: ZikoUIElement;
+    input: ZikoUIElement;
+    ins: ZikoUIElement;
+    kbd: ZikoUIElement;
+    label: ZikoUIElement;
+    legend: ZikoUIElement;
+    li: ZikoUIElement;
+    link: ZikoUIElement;
+    main: ZikoUIElement;
+    map: ZikoUIElement;
+    mark: ZikoUIElement;
+    meta: ZikoUIElement;
+    meter: ZikoUIElement;
+    nav: ZikoUIElement;
+    noscript: ZikoUIElement;
+    object: ZikoUIElement;
+    ol: ZikoUIElement;
+    optgroup: ZikoUIElement;
+    option: ZikoUIElement;
+    output: ZikoUIElement;
+    p: ZikoUIElement;
+    param: ZikoUIElement;
+    picture: ZikoUIElement;
+    pre: ZikoUIElement;
+    progress: ZikoUIElement;
+    q: ZikoUIElement;
+    rp: ZikoUIElement;
+    rt: ZikoUIElement;
+    ruby: ZikoUIElement;
+    s: ZikoUIElement;
+    samp: ZikoUIElement;
+    script: ZikoUIElement;
+    section: ZikoUIElement;
+    select: ZikoUIElement;
+    small: ZikoUIElement;
+    source: ZikoUIElement;
+    span: ZikoUIElement;
+    strong: ZikoUIElement;
+    style: ZikoUIElement;
+    sub: ZikoUIElement;
+    summary: ZikoUIElement;
+    sup: ZikoUIElement;
+    table: ZikoUIElement;
+    tbody: ZikoUIElement;
+    td: ZikoUIElement;
+    template: ZikoUIElement;
+    textarea: ZikoUIElement;
+    tfoot: ZikoUIElement;
+    th: ZikoUIElement;
+    thead: ZikoUIElement;
+    time: ZikoUIElement;
+    title: ZikoUIElement;
+    tr: ZikoUIElement;
+    track: ZikoUIElement;
+    u: ZikoUIElement;
+    ul: ZikoUIElement;
+    var: ZikoUIElement;
+    video: ZikoUIElement;
+    wbr: ZikoUIElement;
+}
+
+interface SvgTags {
+    svg: ZikoUIElement;
+    circle: ZikoUIElement;
+    rect: ZikoUIElement;
+    line: ZikoUIElement;
+    path: ZikoUIElement;
+    g: ZikoUIElement;
+    text: ZikoUIElement;
+    //...
+}
+
+interface MathTags {
+    math: ZikoUIElement;
+    mrow: ZikoUIElement;
+    mi: ZikoUIElement;
+    mo: ZikoUIElement;
+    mn: ZikoUIElement;
+    ms: ZikoUIElement;
+    //...
+}
+
+export type Tags = HtmlTags & SvgTags & MathTags & {
+  [key: string]: ZikoUIElement;
+};
+
+declare const tags: Tags;
+
+export {
+    tags
+};

package/src/ui/tags/index.js

@@ -0,0 +1,21 @@
+import ZikoUIElement from "../elements/ZikoUIElement.js";
+const tags = new Proxy({}, {
+  get(target, prop) {
+    if (typeof prop !== 'string') return undefined;
+    let tag = prop.replaceAll("_","-").toLowerCase();
+    switch(tag){
+      case "html"  : globalThis?.document?.createElement("html")
+      case "head"  :
+      case "style" :
+      case "link"  :
+      case "meta"  :
+      case "srcipt":
+      case "body"  : return null; break;
+      default : return new ZikoUIElement(tag);
+    }
+  }
+});
+
+export {
+  tags
+}