cradova 1.2.0 → 1.4.0

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,30 +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.
 
-cradova.js supports various versions of IE11, Firefox ESR, and Firefox,
-Edge, Safari, and Chrome. No polyfills required.
-
-# why cradova?
-
-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.
+## 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.
 
-we don't use visual DOM or diff algorithms to manage the DOM, we rather do it the natural way.
+Cradova has been used in production and we will update this README to reflect our lessons as we go.
 
-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.
-
-# Installation
+## Installation
 
 ### CDN sources
 
@@ -87,27 +51,27 @@ Happy coding.
 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.
 
-You can get deeper insights from the telegram community 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";
 
-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);
 ```
 
-## using screen
-
+## Using Screen
 ```js
 import _, { Screen, Router } from "cradova";
 
@@ -118,83 +82,109 @@ 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
+## 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)
+
+// state can be managed from 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);
 ```
 
-# Documentation
+## 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.
 
-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.
+## Getting Help
+To get further insights and help on Cradova, visit our new [Telegram Community Chat](https://t.me/cradovaframework).
 
-# getting help
-
-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
 - Sample projects
 - maintenance and promotion
+- building cradova CLI
 
-community [telegram](https://t.me/cradovaframework)
-
-# How to Sponsor
 
-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.
+## 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.