cradova 1.2.0 → 1.4.0

package/dist/index.d.ts

@@ -1,56 +1,82 @@
 declare module "cradova" {
-  type CradovaScreenType = {
+  type CradovaScreenTyping = {
     name: string;
     template: Function | HTMLElement;
     transition?: string;
-    callBack?: (html?: any, data?: Record<string, any>) => void;
     persist?: boolean;
-    effect?: (fn: () => any) => void;
+    /**
+     * Cradova screen
+     * ---
+     * runs once after first render
+     *
+     */
   };
+
+  type CradovaScreenType = {
+    /**
+     * Cradova screen
+     * ---
+     * runs once after first render
+     *
+     */
+    effect?(fn: () => void | Promise<void>): void;
+    /**
+     * Cradova Screen
+     * ---
+     * re-renders the screen -
+     *
+     * first level call will only be called once
+     * lower level calls will be continuously called
+     * @param data .
+     *
+     * *
+     */
+
+    updateState(data: unknown): void;
+  };
+
+  type CradovaElementType = Record<string, any>;
+
   type RefType = {
     /**
      * Cradova Ref
      * ---
      * returns html with cradova reference
      * @param data
-     * @returns html
+     * @returns HTMLElement
      */
-    render: (data: any) => () => HTMLElement;
+    render(data?: any): () => any;
     /**
      * Cradova Ref
      * ---
-     * runs on every state update
-     *
+     * checks if element is in the dom and returns it.
+     * @param data
+     * @return HTMLElement
      */
-    r: (data: any) => () => HTMLElement;
+    instance(): HTMLElement | null;
     /**
      * Cradova Ref
      * ---
-     * runs on every state update
-     *
+     * update ref component with new data and update the dom.
+     * @param data
+     * @returns void
      */
-    onStateUpdate: (callback: () => void) => void;
+    updateState(data: any): void;
     /**
      * Cradova Ref
      * ---
-     * update ref component with new data and update the dom.
+     * remove element from the dom
      * @param data
-     * @returns void
+     * @returns () => HTMLElement
      */
-    updateState: (data: any) => any;
+    remove(): void;
     /**
      * Cradova Ref
      * ---
-     * update ref component with new data and update the dom.
-     * @param data
-     * @returns void
+     * runs once on render
+     *
      */
-    u: (data: any) => any;
-  };
-  type RouterRouteObject = {
-    controller: (params: object, force?: boolean) => any;
-    deactivate: (params: object) => any;
-    packager: (params: any) => void;
+    effect(fn: (data: unknown) => Promise<void> | void): void;
   };
   /**
    * Cradova Router
@@ -58,65 +84,76 @@ declare module "cradova" {
    * 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 {
+  type RouterType = {
     /**
-     * this should be a cradova screen component
+     * Registers a route.
+     *
+     * @param {string}   path     Route path.
+     * @param {any} screen the cradova document tree for the route.
      */
-    private html;
+    route: (path: string, screen: CradovaScreenType) => void;
     /**
-     * this is the name of the screen that appears as the title
+     * get a screen ready before time.
+     *
+     * @param {string}   path     Route path.
+     * @param {any} data data for the screen.
      */
-    name: string;
-    private packed;
-    secondaryChildren: Array<any>;
+    packageScreen: (path: string, data?: any) => void;
+    onPageShow: (callback: () => void) => void;
+    onPageHide: (callback: () => void) => void;
+    /**
+     * Cradova Router
+     * ------
+     *
+     * return last set router params
+     *
+     * .
+     */
+    getParams: () => unknown;
     /**
-     * used internally
+     * Cradova Router
+     * ------
+     *
+     * Navigates to a designated screen in your app
      */
-    private template;
+    navigate: (
+      href: string,
+      data?: Record<string, any> | null,
+      force?: boolean
+    ) => void;
+
     /**
-     * this a set of two class names
-     * one for the entry transition
-     * and one for the exit transition
+     * Cradova
+     * ---
+     * Error Handler for your app
+     *
+     * @param callback
+     * @param path? page path
      */
-    private transition;
-    private callBack;
+
+    addErrorHandler: (callback: (error: string) => void, path?: string) => void;
+  };
+
+  /**
+   * Cradova
+   * ---
+   * Cradova afterMount event
+   *
+   * dispatch this manually if you are not using a cradova screen object
+   *
+   */
+
+  export const cradovaAftermountEvent: CustomEvent<string>;
+
+  /**
+   *  Cradova Screen
+   * ---
+   * create instances of manageable pages
+   * @param name
+   * @param template
+   * @param transitions
+   */
+  export class Screen {
     static SCALE_IN: string;
     static SCALE_OUT: string;
     static CIRCLE_IN: string;
@@ -128,28 +165,39 @@ declare module "cradova" {
     static SLIDE_LEFT: string;
     static SLIDE_RIGHT: string;
     /**
-     * this tells cradova to persist state on the screen or not
-     * persisting is better
+     *  Cradova Screen
+     * ---
+     * create instances of manageable pages
+     * @param name
+     * @param template
+     * @param transitions
+     */
+    constructor(cradova_screen_initials: CradovaScreenTyping);
+    /**
+     * Cradova Screen
+     * ---
+     * runs once after first render
+     *
      */
-    persist: boolean;
-    rendered: boolean;
-    effects: (() => unknown | Promise<unknown>)[];
-    constructor(cradova_screen_initials: CradovaScreenType);
-    effect(fn: () => unknown | Promise<unknown>): void;
-    effector(): Promise<void>;
+    effect(fn: () => void | Promise<void>): 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>;
-  }
+    /**
+     * Cradova Screen
+     * ---
+     * re-renders the screen -
+     *
+     * first level call will only be called once
+     * lower level calls will be continuously called
+     * @param data .
+     *
+     * *
+     */
 
-  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>;
+    updateState(data: unknown): void;
   }
 
   /**
@@ -179,12 +227,12 @@ declare module "cradova" {
    * ability to:
    * - create a store
    * - create actions and fire them
-   * - bind a Ref or RefList
+   * - bind a Ref
    * - listen to changes
    * -  persist changes to localStorage
    * - go back and forward in value history
    * - set keys instead of all values
-   * - update a cradova Ref/RefList automatically
+   * - update a cradova Ref automatically
    * @constructor initial: any, props: {useHistory, persist}
    */
   export class createSignal {
@@ -315,14 +363,14 @@ declare module "cradova" {
    * 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
+   * - update a cradova Ref automatically
+   * @constructor initial: any, Ref: any
    */
 
-  export class simpleStore {
+  export class $ {
     private ref;
     value: any;
-    constructor(initial: unknown, ref?: RefType);
+    constructor(initial: unknown);
     /**
      *  Cradova simpleStore
      * ----
@@ -342,13 +390,14 @@ declare module "cradova" {
     setKey(name: string, value: any, shouldRefRender?: boolean): void;
     /**
      *  Cradova simpleStore
-     * ----
-     *  set a auto - rendering component for this store
+     * ---
+     * is used to bind store data to any element
      *
-     * @param Ref component to bind to.
-     * @param path a property in the object to send to attached ref
+     * @param prop
+     * @returns something
      */
-    bindRef(Ref: any): void;
+
+    bind(prop: string): void;
   }
 
   /**
@@ -373,53 +422,9 @@ declare module "cradova" {
       | any
   ): Promise<unknown>;
 
-  /**
-   * swipe
-   * ---
-   * Now you can detect swipes the best way possible
-   *
-   * @param callback
-   * @param touching?
-   * @param element?
-   */
-  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;
-  /**
-Write CSS media in javascript
 
-@example
-
-_.media("min-width: 790px",
-["#container",
-{
-    width: "100%",
-    height: "100%",
-    "background-color": "#0000"
-}],
-
-["#header",
-{
-    width: "100%",
-    height: "20%",
-    "background-color": "#fff"
-}]
-)
-*/
-  export function media(value: string, ...properties: any[]): void;
   /**
 Write CSS styles in Javascript
 @example
@@ -441,32 +446,9 @@ css(".btn:hover",
 */
   export function css(
     identifier: string,
-    properties: Record<string, string>
+    properties?: Record<string, string>
   ): void;
   /**
-Write animation value in javascript
-
-@example
-
-_.animate("polarization",
-["from",
-{
-    transform: "scale3D(2)" ,
-    height: "10%",
-    "background-color": "#0000"
-}],
-
-["to",
-{
-    transform: "scale3D(1)" ,
-    height: "100%",
-    "background-color": "#ff9800"
-}]
-)
-
-*/
-  export function animate(identifier: string, ...properties: any[]): void;
-  /**
    *
    * @param {expression} condition
    * @param {function} callback
@@ -480,50 +462,18 @@ _.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
    * @returns
    */
-  export function RefElement(
-    element_initials?: string,
-    props?: any,
-    ...other: any
-  ): {
-    render(data?: any): any;
-    r(data?: any): any;
-    instance(): any;
-    i(): any;
-    updateState(state: Record<string, any>): void;
-    u(state: Record<string, any>): void;
-  };
+
   export const ls: Record<string, Function>;
-  export function fullScreen(e: Element): {
-    set(): void;
-    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;
-    u(d?: any): void;
-    render(datas?: any): any;
-    updateState(datas: any[]): void;
-    remove(): void;
-    instance(): any;
-    i(): any;
-  }
+
   /**
    * Cradova Ref
    * -------
@@ -531,31 +481,23 @@ _.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;
-    u(d?: any): void;
     /**
      * Cradova Ref
      * ---
      * returns html with cradova reference
      * @param data
-     * @returns () => HTMLElement
+     * @returns HTMLElement
      */
     render(data?: any): () => any;
-    instance(): any;
-    i(): any;
     /**
      * Cradova Ref
      * ---
-     * runs on every state update
-     *
+     * checks if element is in the dom and returns it.
+     * @param data
+     * @return HTMLElement
      */
-    onStateUpdate(cb: any): void;
+    instance(): HTMLElement | null;
     /**
      * Cradova Ref
      * ---
@@ -564,86 +506,73 @@ _.animate("polarization",
      * @returns void
      */
     updateState(data: any): void;
+    /**
+     * Cradova Ref
+     * ---
+     * remove element from the dom
+     * @param data
+     * @returns () => HTMLElement
+     */
     remove(): void;
+    /**
+     * Cradova Ref
+     * ---
+     * runs once on render
+     *
+     */
+    effect(fn: (data: unknown) => Promise<void> | void): void;
   }
+
   /**
-   * Document fragment
-   * @param children
-   * @returns
-   */
-  type fragmentTYPE = () => (() => HTMLElement) | HTMLElement;
-  export const frag: (...children: fragmentTYPE[]) => DocumentFragment;
-  /**
+   * Cradova
+   * ---
    * Creates new cradova HTML element
    *  @example
-   * _("p") // or _("p.class") or _("p#id") or _("p.class#id")
-   * using inline props
+   * // using template
+   * const p = _("p");
+   * _("p.class");
+   * _("p#id");
+   * _("p.class#id");
+   * _("p.foo.bar#poo.loo");
+   *
+   * // 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"}
    * })
-   * )
-   *
-   * 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"}
-   * })
-   * )
-   *
-   * @param  {...any} element_initials
-   * @returns function - cradova element
-   */
-
-  /**
-   * Creates new cradova HTML element
-   *  @example
-   * _("p") // or _("p.class") or _("p#id") or _("p.class#id")
-   * using inline props
+   * // or no style props it works!
    * _("p",{
    * text: "am a p tag",
-   * style: {
    * color: "blue"
-   * }
-   * )
-   * adding children
-   * _("p",
-   * _("span",{text:" am a span tag like so",
-   *  {style: {color: "brown"}
    * })
+   *
+   * // props and children
+   * _("p", // template first
+   *  // property next if wanted
+   *  {style: {color: "brown"}, // optional
+   *  // the rest should be children or text
+   * _("span", " am a span tag text like so"),
+   * ...
    * )
    *
-   * props and children
+   * // list of 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"}
-   * })
+   * _("span",
+   * {
+   * text:" am a span tag like so",
+   *  color: "brown",
+   * }),
+   * ...
    * )
    *
-   * @param  {...any} element_initials
+   * @param  {...any[]} element_initials
    * @returns function - cradova element
    */
+
   const _: any;
   export default _;
 }