cradova 1.2.0 → 1.3.0

package/README.md

@@ -48,16 +48,13 @@ 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.
 
-cradova.js supports various versions of IE11, Firefox ESR, and Firefox,
-Edge, Safari, and Chrome. No polyfills required.
-
-# why cradova?
+# 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.
-but extra speed, ease and security.
+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.
 
@@ -65,7 +62,7 @@ which is fast and simple, with all the benefits and no abstracts whatsoever.
 
 cradova has been used in production and we will update this README to reflect them as ASAP.
 
-Happy coding.
+It's time to change gears.
 
 # Installation
 
@@ -89,20 +86,23 @@ 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.
+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 for the moment.
+You can get deeper insights from the [telegram community](https://t.me/cradovaframework) for the moment.
 
 Here's an example of create a basic component in cradova:
 
 ```js
 import _, { frag } from "cradova";
 
-function HelloMessage({ name }) {
-  return _("div", "Hello " + name);
+function Hello(name) {
+  return _("h1", "Hello " + name);
 }
+
+// calling Hello returns the HTML
+const html = Hello("peter")(); // or
 // using frag
-const html = frag(HelloMessage("friday"));
+const html = frag(Hello("peter"), Hello("joe"));
 document.body.append(html);
 ```
 
@@ -118,59 +118,89 @@ function HelloMessage(name) {
       res("friday");
     });
   });
-  // effects can be used to make api calls
-  // which will rerender this screen when done
-  // with the data returned
-  return _("div", "Hello" + name);
+  // effects can be used to make api calls needed for the page
+  return _("div", "Hello  " + name);
 }
 
 const home = new Screen({
-  name: "home page", // page title
+  name: "hello page", // page title
   template: HelloMessage,
+  ...
 });
 
 Router.route("/", home);
+
+// navigates to that page
+// Router.navigate("/home");
+// get the page ready in the background
+// Router.packageScreen("/home");
+
 ```
 
 # State management
 
 ```js
-import _, { dispatch, Ref } from "cradova";
+// we have
+
+// dispatch - global (element) requires state ID
+
+// element can have this.updateState when shouldUpdate is true
+
+// Ref components (global and local)
+
+// RefList components (global and local)
+
+// state can be bind to a store when using createSignal or simpleStores
+
+import _, { Ref } from "cradova";
+
+// simple count
+
+function counter() {
+  let num = 0;
+  return _("h1| 0", {
+    shouldUpdate: true,
+    onclick() {
+      num++;
+      this.updateState({ text: num });
+    },
+  });
+}
 
 function HelloMessage(name) {
   return _("div.foo#bar", {
-    stateID: "bar",
-    text: "hello ____" + (name || ""),
+    shouldUpdate: true,
+    text: "hello  " + (name || "no name"),
     onclick() {
-      const name = prompt();
-      dispatch("bar", { text: "hello " + name });
+      const name = prompt("what are your names");
+      this.updateState({ text: "hello " + name });
     },
   });
 }
 
-const nameRef = new Ref(function (name) {
+const nameRef = new Ref(function ({ name }) {
   const self = this;
   return _("div.foo#bar", {
-    text: "hello ____" + (name || ""),
+    text: "hello" + (name || "no name"),
     onclick() {
       const name = prompt();
-      self.updateState({ text: "hello " + name });
+      self.updateState({ name });
     },
   });
 });
 
 function Home() {
-  return _(
-    "div",
-    { id: "foo", class: "bar" },
-    HelloMessage,
-    nameRef.render(null)
+  return _("div.foo#bar",
+   counter,
+   HelloMessage,
+   nameRef.render({ name: "no name" })
   );
 }
 
 const home = new Screen({
   name: "home page", // page title
   template: Home,
+  ...
 });
 
 Router.route("/", home);
@@ -192,9 +222,16 @@ we are currently working to set up.
 - UI component libraries for cradova
 - Sample projects
 - maintenance and promotion
+- building cradova CLI
 
 community [telegram](https://t.me/cradovaframework)
 
-# How to Sponsor
+# 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 [OpenCollective](https://opencollective.com/cradova). Invoices can be obtained via GitHub's payment system. Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships will be entitled to logo placements in Tiers.
+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

@@ -1,12 +1,41 @@
 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
+     * ---
+     * runs on first render.
+     * @param data
+     * @returns void
+     *
+     *
+     * .
+     *
+     */
+    updateState: (data: any) => any;
   };
+
+  type CradovaElementType = Record<string, any>;
+
   type RefType = {
     /**
      * Cradova Ref
@@ -26,10 +55,10 @@ declare module "cradova" {
     /**
      * Cradova Ref
      * ---
-     * runs on every state update
+     * runs on render and every state update
      *
      */
-    onStateUpdate: (callback: () => void) => void;
+    effect(fn: (data: unknown) => Promise<void> | void): void;
     /**
      * Cradova Ref
      * ---
@@ -91,32 +120,14 @@ declare module "cradova" {
     | Record<string, any>;
 
   /**
+   *  Cradova Screen
+   * ---
+   * create instances of manageable pages and scaffolds
    * @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;
@@ -128,15 +139,21 @@ 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 and scaffolds
+     * @param name
+     * @param template
+     * @param transitions
      */
-    persist: boolean;
-    rendered: boolean;
-    effects: (() => unknown | Promise<unknown>)[];
-    constructor(cradova_screen_initials: CradovaScreenType);
-    effect(fn: () => unknown | Promise<unknown>): void;
-    effector(): Promise<void>;
+    constructor(cradova_screen_initials: CradovaScreenTyping);
+    /**
+     * Cradova Screen
+     * ---
+     * runs once after first render
+     *
+     */
+    effect(fn: () => void | Promise<void>): void;
     package(data?: any): Promise<void>;
     onActivate(cb: (data: any) => void): void;
     addChild(...addOns: any[]): void;
@@ -322,7 +339,7 @@ declare module "cradova" {
   export class simpleStore {
     private ref;
     value: any;
-    constructor(initial: unknown, ref?: RefType);
+    constructor(initial: unknown);
     /**
      *  Cradova simpleStore
      * ----
@@ -348,7 +365,17 @@ declare module "cradova" {
      * @param Ref component to bind to.
      * @param path a property in the object to send to attached ref
      */
-    bindRef(Ref: any): void;
+    bindRef(Ref: any, prop?: string): void;
+    /**
+     *  Cradova simpleStore
+     * ---
+     * is used to bind store data to any element
+     *
+     * @param prop
+     * @returns something
+     */
+
+    bind(prop: string): void;
   }
 
   /**
@@ -441,7 +468,7 @@ css(".btn:hover",
 */
   export function css(
     identifier: string,
-    properties: Record<string, string>
+    properties?: Record<string, string>
   ): void;
   /**
 Write animation value in javascript
@@ -480,13 +507,10 @@ _.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
@@ -513,11 +537,8 @@ _.animate("polarization",
     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;
@@ -534,11 +555,8 @@ _.animate("polarization",
     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
      * ---
@@ -549,13 +567,6 @@ _.animate("polarization",
     render(data?: any): () => any;
     instance(): any;
     i(): any;
-    /**
-     * Cradova Ref
-     * ---
-     * runs on every state update
-     *
-     */
-    onStateUpdate(cb: any): void;
     /**
      * Cradova Ref
      * ---
@@ -565,6 +576,13 @@ _.animate("polarization",
      */
     updateState(data: any): void;
     remove(): void;
+    /**
+     * Cradova Ref
+     * ---
+     * runs on render and every state update
+     *
+     */
+    effect(fn: (data: unknown) => Promise<void> | void): void;
   }
   /**
    * Document fragment
@@ -573,77 +591,57 @@ _.animate("polarization",
    */
   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 _;
 }