cradova 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -1,21 +1,177 @@
 declare module "cradova" {
+  type CradovaScreenType = {
+    name: string;
+    template: Function | HTMLElement;
+    transition?: string;
+    callBack?: (html?: any, data?: Record<string, any>) => void;
+    persist?: boolean;
+    effect?: (fn: () => any) => void;
+  };
+  type RefType = {
+    /**
+     * Cradova Ref
+     * ---
+     * returns html with cradova reference
+     * @param data
+     * @returns html
+     */
+    render: (data: any) => () => HTMLElement;
+    /**
+     * Cradova Ref
+     * ---
+     * runs on every state update
+     *
+     */
+    r: (data: any) => () => HTMLElement;
+    /**
+     * Cradova Ref
+     * ---
+     * runs on every state update
+     *
+     */
+    onStateUpdate: (callback: () => void) => void;
+    /**
+     * Cradova Ref
+     * ---
+     * update ref component with new data and update the dom.
+     * @param data
+     * @returns void
+     */
+    updateState: (data: any) => any;
+    /**
+     * Cradova Ref
+     * ---
+     * update ref component with new data and update the dom.
+     * @param data
+     * @returns void
+     */
+    u: (data: any) => any;
+  };
+  type RouterRouteObject = {
+    controller: (params: object, force?: boolean) => any;
+    deactivate: (params: object) => any;
+    packager: (params: any) => void;
+  };
   /**
-   * swipe
+   * Cradova Router
    * ---
-   * Now you can detect swipes the best way possible
+   * Facilitates navigation within the application and initializes
+   * page views based on the matched routes.
+   */
+  type RouterType =
+    | {
+        /**
+         * Registers a route.
+         *
+         * @param {string}   path     Route path.
+         * @param {any} screen the cradova document tree for the route.
+         */
+        route: (path: string, screen: CradovaScreenType) => void;
+        /**
+         * get a screen ready before time.
+         *
+         * @param {string}   path     Route path.
+         * @param {any} data data for the screen.
+         */
+        packageScreen: (path: string, data?: any) => void;
+        onPageShow: (callback: () => void) => void;
+        onPageHide: (callback: () => void) => void;
+        /**
+         * Cradova Router
+         * ------
+         *
+         * Navigates to a designated screen in your app
+         */
+        navigate: (
+          href: string,
+          data?: Record<string, any> | null,
+          force?: boolean
+        ) => void;
+      }
+    | Record<string, any>;
+
+  /**
+   * @param name
+   * @param template
+   * @param transitions
+   */
+  export class Screen {
+    /**
+     * this should be a cradova screen component
+     */
+    private html;
+    /**
+     * this is the name of the screen that appears as the title
+     */
+    name: string;
+    private packed;
+    secondaryChildren: Array<any>;
+    /**
+     * used internally
+     */
+    private template;
+    /**
+     * this a set of two class names
+     * one for the entry transition
+     * and one for the exit transition
+     */
+    private transition;
+    private callBack;
+    static SCALE_IN: string;
+    static SCALE_OUT: string;
+    static CIRCLE_IN: string;
+    static CIRCLE_OUT: string;
+    static FADE_OUT: string;
+    static FADE_IN: string;
+    static SLIDE_UP: string;
+    static SLIDE_DOWN: string;
+    static SLIDE_LEFT: string;
+    static SLIDE_RIGHT: string;
+    /**
+     * this tells cradova to persist state on the screen or not
+     * persisting is better
+     */
+    persist: boolean;
+    rendered: boolean;
+    effects: (() => unknown | Promise<unknown>)[];
+    constructor(cradova_screen_initials: CradovaScreenType);
+    effect(fn: () => unknown | Promise<unknown>): void;
+    effector(): Promise<void>;
+    package(data?: any): Promise<void>;
+    onActivate(cb: (data: any) => void): void;
+    addChild(...addOns: any[]): void;
+    deActivate(): void;
+    Activate(data?: any, force?: boolean): Promise<void>;
+  }
+
+  export class Scaffold {
+    private history;
+    private Scaffolds;
+    push(label: string, data?: unknown, force?: boolean): Promise<void>;
+    pop(data?: unknown, force?: boolean): Promise<void>;
+    addScaffolds(scaffolds: Record<string, CradovaScreenType>): Promise<void>;
+  }
+
+  /**
+   * Cradova Router
+   * ---
+   * Facilitates navigation within the application and initializes
+   * page views based on the matched routes.
+   */
+  export const Router: RouterType;
+
+  /**
+   * Send a new state to specified element with stateID
    *
-   * @param callback
-   * @param touching?
-   * @param element?
+   * @param stateID
+   * @param state
+   * @returns element(s)
    */
-  export function swipe(
-    callback: (swipe_data: Record<string, number>) => void,
-    touching?: boolean,
-    element?: HTMLElement
-  ): {
-    start(): void;
-    stop(): void;
-  };
+  export function dispatch(
+    stateID: string | Record<string, any>,
+    state?: Record<string, any>
+  ): any;
+
   /**
    *  Cradova Signal
    * ----
@@ -32,6 +188,14 @@ declare module "cradova" {
    * @constructor initial: any, props: {useHistory, persist}
    */
   export class createSignal {
+    private callback;
+    private persistName;
+    private actions;
+    private useHistory;
+    private history;
+    private ref;
+    private index;
+    private path;
     value: any;
     constructor(
       initial: unknown,
@@ -143,156 +307,94 @@ declare module "cradova" {
      */
     clearPersist(): void;
   }
-  type CradovaScreenType = {
-    name: string;
-    template: Function | HTMLElement;
-    transition?: string;
-    callBack?: (html?: any, data?: Record<string, any>) => void;
-    persist?: boolean;
-    effect?: (fn: () => any) => void;
-  };
-  type RefType = {
-    /**
-     * Cradova Ref
-     * ---
-     * returns html with cradova reference
-     * @param data
-     * @returns html
-     */
-    render: (data: any) => () => HTMLElement;
-    /**
-     * Cradova Ref
-     * ---
-     * runs on every state update
-     *
-     */
-    r: (data: any) => () => HTMLElement;
+
+  /**
+   *  Cradova simpleStore
+   * ----
+   *  create stateful data store.
+   * ability to:
+   * - create a store
+   * - set keys instead of all values
+   * - update a cradova Ref/RefList/RefElement automatically
+   * @constructor initial: any, Ref/RefList/RefElement: any
+   */
+
+  export class simpleStore {
+    private ref;
+    value: any;
+    constructor(initial: unknown, ref?: RefType);
     /**
-     * Cradova Ref
-     * ---
-     * runs on every state update
-     *
+     *  Cradova simpleStore
+     * ----
+     *  set simpleStore value
+     * @param value - simpleStore value
+     * @returns void
      */
-    onStateUpdate: (callback: () => void) => void;
+    set(value: unknown, shouldRefRender?: boolean): void;
     /**
-     * Cradova Ref
-     * ---
-     * update ref component with new data and update the dom.
-     * @param data
+     *  Cradova simpleStore
+     * ----
+     *  set a key value if it's an object
+     * @param name - name of the key
+     * @param value - value of the key
      * @returns void
      */
-    updateState: (data: any) => any;
+    setKey(name: string, value: any, shouldRefRender?: boolean): void;
     /**
-     * Cradova Ref
-     * ---
-     * update ref component with new data and update the dom.
-     * @param data
-     * @returns void
+     *  Cradova simpleStore
+     * ----
+     *  set a auto - rendering component for this store
+     *
+     * @param Ref component to bind to.
+     * @param path a property in the object to send to attached ref
      */
-    u: (data: any) => any;
-  };
-  type RouterRouteObject = {
-    controller: (params: object, force?: boolean) => any;
-    deactivate: (params: object) => any;
-    packager: (params: any) => void;
-  };
+    bindRef(Ref: any): void;
+  }
+
   /**
-   * Cradova Router
-   * ---
-   * Facilitates navigation within the application and initializes
-   * page views based on the matched routes.
+   *
+   * Cradova Ajax
+   * ------------------
+   * your new axios alternative
+   * supports files upload
+   * @param url string
+   * @param {{method: string;data;header;callbacks;}} opts
+   * @returns any
    */
-  type RouterType =
-    | {
-        /**
-         * Registers a route.
-         *
-         * @param {string}   path     Route path.
-         * @param {any} screen the cradova document tree for the route.
-         */
-        route: (path: string, screen: CradovaScreenType) => void;
-        routes: Record<string, RouterRouteObject>;
-        lastNavigatedRoute: string | null;
-        lastNavigatedRouteController: RouterRouteObject | null;
-        nextRouteController: RouterRouteObject | null;
-        params: Record<string, any>;
-        /**
-         * n/a
-         */
-        router: (e: any, force?: boolean) => void;
-        /**
-         * get a screen ready before time.
-         *
-         * @param {string}   path     Route path.
-         * @param {any} data data for the screen.
-         */
-        packageScreen: (path: string, data?: any) => void;
-        pageShow: ((path: string) => void) | null;
-        pageHide: ((path: string) => void) | null;
-        onPageShow: (callback: () => void) => void;
-        onPageHide: (callback: () => void) => void;
-        /**
-         * Cradova Router
-         * ------
-         *
-         * Navigates to a designated screen in your app
-         */
-        navigate: (
-          href: string,
-          data?: Record<string, any> | null,
-          force?: boolean
-        ) => void;
-      }
-    | Record<string, any>;
+  export function Ajax(
+    url: string | URL,
+    opts?:
+      | {
+          method?: string;
+          data?: Record<string, any>;
+          header?: Record<string, any>;
+          callbacks?: Record<string, (arg: any) => void>;
+        }
+      | any
+  ): Promise<unknown>;
+
   /**
-   * Cradova Router
+   * swipe
    * ---
-   * Facilitates navigation within the application and initializes
-   * page views based on the matched routes.
-   */
-  export const Router: RouterType;
-  /**
-   * @param name
-   * @param template
-   * @param transitions
+   * Now you can detect swipes the best way possible
+   *
+   * @param callback
+   * @param touching?
+   * @param element?
    */
-  export class Screen {
-    /**
-     * this is the name of the screen that appears as the title
-     */
-    name: string;
-    secondaryChildren: Array<any>;
-    static SCALE_IN: string;
-    static SCALE_OUT: string;
-    static CIRCLE_IN: string;
-    static CIRCLE_OUT: string;
-    static FADE_OUT: string;
-    static FADE_IN: string;
-    static SLIDE_UP: string;
-    static SLIDE_DOWN: string;
-    static SLIDE_LEFT: string;
-    static SLIDE_RIGHT: string;
-    /**
-     * this tells cradova to persist state on the screen or not
-     * persisting is better
-     */
-    persist: boolean;
-    rendered: boolean;
-    effects: (() => unknown | Promise<unknown>)[];
-    constructor(cradova_screen_initials: CradovaScreenType);
-    effect(fn: () => unknown | Promise<unknown>): void;
-    effector(): Promise<void>;
-    package(data?: any): Promise<void>;
-    onActivate(cb: (data: any) => void): void;
-    addChild(...addOns: any[]): void;
-    deActivate(): void;
-    Activate(data?: any, force?: boolean): Promise<void>;
-  }
-  export class Scaffold {
-    push(label: string, data?: unknown, force?: boolean): Promise<void>;
-    pop(data?: unknown, force?: boolean): Promise<void>;
-    addScaffolds(scaffolds: Record<string, CradovaScreenType>): Promise<void>;
-  }
+  export function swipe(
+    callback: (swipe_data: Record<string, number>) => void,
+    touching?: boolean,
+    element?: HTMLElement
+  ): {
+    start(): void;
+    stop(): void;
+  };
+
+  export function loadCradovaUICss(seconds?: number): void;
+
+  export function IsElementInView(element: HTMLElement): boolean;
+
   export const controls: () => void;
   export function uuid(): string;
   export function PromptBeforeLeave(callback?: (e: any) => void): void;
@@ -378,10 +480,13 @@ _.animate("polarization",
     ifTrue: () => any,
     ifFalse: () => any
   ): () => any;
-  /**
+  /** @deprecated
+   *
    * Create element and get a callback to update their state
    * no need to manage stateIDs
    * ----------------------------------------------------------------
+   * please use element.updateState(state) instead in listeners and mount events
+   * ---
    *
    * @param element_initials
    * @param props
@@ -405,6 +510,10 @@ _.animate("polarization",
     exist(): void;
   };
   export class RefList {
+    private component;
+    private stateID;
+    private parentElement;
+    private datas;
     constructor(component: (...data: any) => any);
     stale(datas: any): void;
     r(d?: any): any;
@@ -422,6 +531,10 @@ _.animate("polarization",
    *
    */
   export class Ref {
+    private component;
+    private stateID;
+    private upcb;
+    private data;
     constructor(component: (...data: any) => any);
     stale(data: any): void;
     r(d?: any): () => any;
@@ -461,81 +574,41 @@ _.animate("polarization",
   type fragmentTYPE = () => (() => HTMLElement) | HTMLElement;
   export const frag: (...children: fragmentTYPE[]) => DocumentFragment;
   /**
-   * Send a new state to specified element with stateID
+   * Creates new cradova HTML element
+   *  @example
+   * _("p") // or _("p.class") or _("p#id") or _("p.class#id")
+   * using inline props
+   * _("p",{
+   * text: "am a p tag",
+   * style: {
+   * color: "blue"
+   * }
+   * )
+   * adding children
+   * _("p",
+   * _("span",{text:" am a span tag like so",
+   *  {style: {color: "brown"}
+   * })
+   * )
    *
-   * @param stateID
-   * @param state
-   * @returns element(s)
-   */
-  export function dispatch(
-    stateID: string | Record<string, any>,
-    state?: Record<string, any>
-  ): any;
-  /**
+   * props and children
+   * _("p",
+   * // props first
+   * {
+   * text: "am a p tag",
+   * style: {
+   * color: "blue"
+   * },
+   * // all children goes after
+   * _("span",{text:" am a span tag like so",
+   *  {style: {color: "brown"}
+   * })
+   * )
    *
-   * Cradova Ajax
-   * ------------------
-   * your new axios alternative
-   * supports files upload
-   * @param url string
-   * @param {{method: string;data;header;callbacks;}} opts
-   * @returns any
+   * @param  {...any} element_initials
+   * @returns function - cradova element
    */
-  export function Ajax(
-    url: string | URL,
-    opts?:
-      | {
-          method?: string;
-          data?: Record<string, any>;
-          header?: Record<string, any>;
-          callbacks?: Record<string, (arg: any) => void>;
-        }
-      | any
-  ): Promise<unknown>;
-  export function IsElementInView(element: HTMLElement): boolean;
-  export class simpleStore {
-    value: any;
-    constructor(initial: unknown, ref: RefType);
-    /**
-     *  Cradova simpleStore
-     * ----
-     *  set simpleStore value
-     * @param value - simpleStore value
-     * @returns void
-     */
-    set(value: unknown, shouldRefRender?: boolean): void;
-    /**
-     *  Cradova simpleStore
-     * ----
-     *  set a key value if it's an object
-     * @param name - name of the key
-     * @param value - value of the key
-     * @returns void
-     */
-    setKey(name: string, value: any, shouldRefRender?: boolean): void;
-    /**
-     *  Cradova simpleStore
-     * ----
-     *  set a auto - rendering component for this store
-     *
-     * @param Ref component to bind to.
-     * @param path a property in the object to send to attached ref
-     */
-    bindRef(Ref: any): void;
-  }
-  export const make: (txx: any) =>
-    | {
-        tag: string;
-        className?: undefined;
-        ID?: undefined;
-        innerValue?: undefined;
-      }
-    | {
-        tag: undefined;
-        className: any;
-        ID: any;
-        innerValue: string;
-      };
+
   /**
    * Creates new cradova HTML element
    *  @example