cradova 1.3.0 → 1.4.1

package/README.md

@@ -1,41 +1,18 @@
-# Cradova
-
-<center>
-<img src="cradova.png" width="100px">
-
-Cradova is a JavaScript framework for building Single Page Applications and PWAs.
-
-</center>
-<br>
-<p>
-	<a href="https://www.npmjs.com/package/cradova">
-		<img src="https://img.shields.io/npm/v/cradova.svg" alt="npm Version" />
-	</a>&nbsp;
-	<a href="https://github.com/cradova/cradova.js/blob/next/LICENSE">
-		<img src="https://img.shields.io/npm/l/cradova.svg" alt="License" />
-	</a>&nbsp;
-	<a href="https://www.npmjs.com/package/cradova">
-		<img src="https://img.shields.io/npm/dm/cradova.svg" alt="npm Downloads">
-	</a>&nbsp;
-	<a href="https://www.npmjs.com/package/cradova">
-		<img src="https://img.shields.io/travis/cradova/cradova.js/next.svg?colorB=brightgreen" alt="Build Status">
-	</a>
-    &nbsp;
-	<a href="https://opencollective.com/cradova">
-		<img src="https://img.shields.io/opencollective/all/cradova.svg?colorB=brightgreen" alt="Donate at OpenCollective">
-	</a>&nbsp;
-	
-</p>
-
+<a><img src="cradova.png" alt="logo" width="80" height="80" align="right"></a>
+
+# Cradova.js
+[![npm Version](https://img.shields.io/npm/v/cradova.svg)](https://www.npmjs.com/package/cradova)
+[![License](https://img.shields.io/npm/l/cradova.svg)](https://github.com/cradova/cradova.js/blob/next/LICENSE)
+[![npm Downloads](https://img.shields.io/npm/dm/cradova.svg)](https://www.npmjs.com/package/cradova)
+[![Build Status](https://img.shields.io/travis/cradova/cradova.js/next.svg?colorB=brightgreen)](https://www.npmjs.com/package/cradova)
+[![Donate at OpenCollective](https://img.shields.io/opencollective/all/cradova.svg?colorB=brightgreen)](https://opencollective.com/cradova)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/cradova/cradova.js/blob/next/contributing.md)
 
-  <br>
-  <br>
   
 ## Contents
 
-- [What is cradova.js?](#what-is-cradova?)
-- [Why we built cradova?](#the-?)
+- [What is Cradova](#what-is-cradovajs)
+- [Why did we build Cradova?](#whats-the-benefit)
 - [Installation](#installation)
 - [Examples](#examples)
 - [Documentation](#documentation)
@@ -44,27 +21,17 @@ Cradova is a JavaScript framework for building Single Page Applications and PWAs
 
 ## What is cradova.js?
 
-cradova is a JavaScript framework for building Single Page Applications and PWAs.
+Cradova is a JavaScript framework for building Single Page Applications and PWAs.
 
 It's small, fast and provides state management, routing and XHR utilities out of the box.
 
-# Whats the benefit?
-
-Javascript is a powerful language.
-our aim is not to limit what you can achieve but rather make your make them limitless.
-
-we made Cradova to give you more power at no cost.
-extra speed, ease and security.
-
-we don't use visual DOM or diff algorithms to manage the DOM, we rather do it the natural way.
-
-which is fast and simple, with all the benefits and no abstracts whatsoever.
+## What's the benefit?
+We aim to be fast and simple with and no hidden abstractions whatsoever.
+We don't use visual DOM or any diff algorithms to manage the DOM.
 
-cradova has been used in production and we will update this README to reflect them as ASAP.
+Cradova has been used in production and we will update this README to reflect our lessons as we go.
 
-It's time to change gears.
-
-# Installation
+## Installation
 
 ### CDN sources
 
@@ -84,13 +51,11 @@ It's time to change gears.
 npm i cradova
 ```
 
-# Examples
-
-Before you confirm these below, please know that they are many cool parts about cradova not described here but will be on a later time. and eventually when we get a frontend hosting.
 
-You can get deeper insights from the [telegram community](https://t.me/cradovaframework) for the moment.
+## Examples
+Many aspects of Cradova are not reflected in the following example. More functionality will be entailed in future docs.
 
-Here's an example of create a basic component in cradova:
+Here's an example of create a basic component in Cradova:
 
 ```js
 import _, { frag } from "cradova";
@@ -106,8 +71,7 @@ const html = frag(Hello("peter"), Hello("joe"));
 document.body.append(html);
 ```
 
-## using screen
-
+## Using Screen
 ```js
 import _, { Screen, Router } from "cradova";
 
@@ -137,7 +101,7 @@ Router.route("/", home);
 
 ```
 
-# State management
+## State management
 
 ```js
 // we have
@@ -148,9 +112,7 @@ Router.route("/", home);
 
 // Ref components (global and local)
 
-// RefList components (global and local)
-
-// state can be bind to a store when using createSignal or simpleStores
+// state can be managed from a store when using createSignal or simpleStores
 
 import _, { Ref } from "cradova";
 
@@ -206,17 +168,14 @@ const home = new Screen({
 Router.route("/", home);
 ```
 
-# Documentation
-
-We are currently working building cradova's documentation and we have only a few hands, if you are interested you can join the community and learn first hand and also support cradova's progress.
+## Documentation
+We are currently building cradova's documentation and we have only a few hands, if you're interested in helping you can join the community, learn first hand, and support cradova's progress.
 
-# getting help
+## Getting Help
+To get further insights and help on Cradova, visit our new [Telegram Community Chat](https://t.me/cradovaframework).
 
-To get help visit our new [telegram community](https://t.me/cradovaframework)
-
-# contributing
-
-we are currently working to set up.
+## Contributing
+We are currently working to set up:
 
 - Cradova Documentation Website
 - UI component libraries for cradova
@@ -224,14 +183,8 @@ we are currently working to set up.
 - maintenance and promotion
 - building cradova CLI
 
-community [telegram](https://t.me/cradovaframework)
-
-# Sponsor
-
-It's a general aim to have a development tool
-with great developer experience and speed and that what
-cradova gives, "low abstraction with great speed".
-
-it's measurable, to take cradova further your support is needed.
 
-Sponsorships can be done via [Patreon](https://www.patreon.com/FridayCandour). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships will be entitled to logo placements in Tiers.
+## Sponsor
+Your support is appriciated and needed to advance Cradova further into the future.\
+Sponsorships can be done via [Patreon](https://www.patreon.com/FridayCandour).\
+Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships will be entitled to logo placements in Tiers.

package/dist/index.d.ts

@@ -21,17 +21,18 @@ declare module "cradova" {
      */
     effect?(fn: () => void | Promise<void>): void;
     /**
-     * Cradova screen
+     * Cradova Screen
      * ---
-     * runs on first render.
-     * @param data
-     * @returns void
+     * re-renders the screen -
      *
+     * first level call will only be called once
+     * lower level calls will be continuously called
+     * @param data .
      *
-     * .
-     *
+     * *
      */
-    updateState: (data: any) => any;
+
+    updateState(data: unknown): void;
   };
 
   type CradovaElementType = Record<string, any>;
@@ -42,44 +43,40 @@ declare module "cradova" {
      * ---
      * 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 render and every state update
-     *
+     * update ref component with new data and update the dom.
+     * @param data
+     * @returns void
      */
-    effect(fn: (data: unknown) => Promise<void> | 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
@@ -87,42 +84,71 @@ 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>;
+  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
+     * ------
+     *
+     * return last set router params
+     *
+     * .
+     */
+    getParams: () => unknown;
+    /**
+     * Cradova Router
+     * ------
+     *
+     * Navigates to a designated screen in your app
+     */
+    navigate: (
+      href: string,
+      data?: Record<string, any> | null,
+      force?: boolean
+    ) => void;
+
+    /**
+     * Cradova
+     * ---
+     * Error Handler for your app
+     *
+     * @param callback
+     * @param path? page path
+     */
+
+    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 and scaffolds
+   * create instances of manageable pages
    * @param name
    * @param template
    * @param transitions
@@ -141,7 +167,7 @@ declare module "cradova" {
     /**
      *  Cradova Screen
      * ---
-     * create instances of manageable pages and scaffolds
+     * create instances of manageable pages
      * @param name
      * @param template
      * @param transitions
@@ -159,14 +185,19 @@ declare module "cradova" {
     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;
   }
 
   /**
@@ -196,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 {
@@ -332,11 +363,11 @@ 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);
@@ -357,15 +388,6 @@ declare module "cradova" {
      * @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, prop?: string): void;
     /**
      *  Cradova simpleStore
      * ---
@@ -400,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
@@ -471,29 +449,6 @@ css(".btn:hover",
     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
@@ -516,35 +471,9 @@ _.animate("polarization",
    * @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;
-    constructor(component: (...data: any) => any);
-    r(d?: any): any;
-    render(datas?: any): any;
-    updateState(datas: any[]): void;
-    remove(): void;
-    instance(): any;
-    i(): any;
-  }
+
   /**
    * Cradova Ref
    * -------
@@ -552,21 +481,23 @@ _.animate("polarization",
    *
    */
   export class Ref {
-    private component;
-    private stateID;
-    private upcb;
     constructor(component: (...data: any) => any);
-    r(d?: any): () => any;
     /**
      * Cradova Ref
      * ---
      * returns html with cradova reference
      * @param data
-     * @returns () => HTMLElement
+     * @returns HTMLElement
      */
     render(data?: any): () => any;
-    instance(): any;
-    i(): any;
+    /**
+     * Cradova Ref
+     * ---
+     * checks if element is in the dom and returns it.
+     * @param data
+     * @return HTMLElement
+     */
+    instance(): HTMLElement | null;
     /**
      * Cradova Ref
      * ---
@@ -575,22 +506,22 @@ _.animate("polarization",
      * @returns void
      */
     updateState(data: any): void;
+    /**
+     * Cradova Ref
+     * ---
+     * remove element from the dom
+     * @param data
+     * @returns () => HTMLElement
+     */
     remove(): void;
     /**
      * Cradova Ref
      * ---
-     * runs on render and every state update
+     * 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