cradova 1.5.0 → 2.1.0

package/README.md

@@ -1,20 +1,33 @@
-<div style="display: flex; align-items:center; justify-content: space-around; width: 100%;">
-<h1 style="border: none"> Cradova</h1>
-<a><img src="cradova.png" alt="cradova logo" width="100" height="100"></a>
-</div>
-<br>
-<hr>
-<br>
-<br>
-
+<br/>
+<p align="center">
+  <a href="https://github.com/fridaycandour/cradova">
+    <img src="cradova.png" alt="Logo" width="80" height="80">
+  </a>
+
+  <h1 align="center">Cradova</h1>
+
+  <p align="center">
+    Cradova is a JavaScript framework for building Single Page Applications and PWAs.
+    <br/>
+    <br/>
+    <a href="https://github.com/fridaycandour/cradova#examples"><strong>Explore the docs »</strong></a>
+    <br/>
+    <br/>
+    <a href="https://t.me/cradovaframework">Join Community</a>
+    .
+    <a href="https://github.com/fridaycandour/cradova/issues">Report Bug</a>
+    .
+    <a href="https://github.com/fridaycandour/cradova/issues">Request Feature</a>
+  </p>
+</p>
+
+![Contributors](https://img.shields.io/github/contributors/fridaycandour/cradova?color=dark-green) ![Issues](https://img.shields.io/github/issues/fridaycandour/cradova) ![License](https://img.shields.io/github/license/fridaycandour/cradova)
 [![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)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/cradova/cradova.js/blob/next/contributing.md)![Forks](https://img.shields.io/github/forks/fridaycandour/cradova?style=social) ![Stargazers](https://img.shields.io/github/stars/fridaycandour/cradova?style=social)
 
-## Contents
+# Contents
 
 - [What is Cradova](#what-is-cradova)
 - [Why Cradova?](#whats-the-benefit)
@@ -69,10 +82,17 @@ Many aspects of Cradova are not reflected in the following example. More functio
 Here's an example of create a basic component in Cradova:
 
 ```js
-import _ from "cradova";
+// cradova v2.0.0 comes with all html tags prebuilt and fully typed
+// this gives your app more performance gain.
+import _, { h1 } from "cradova";
 
 function Hello(name) {
-  return _("h1", "Hello " + name);
+  return h1("Hello " + name, {
+    className: "title",
+    style: {
+      color: "grey",
+    },
+  });
 }
 
 // document fragment empty cradova call _()
@@ -82,6 +102,19 @@ const html = _(Hello("peter"), Hello("joe"));
 document.body.append(html);
 ```
 
+```js
+// regular example
+import _ from "cradova";
+
+function Hello(name) {
+  return _("h1", "Hello " + name);
+}
+
+const html = _(Hello("peter"), Hello("joe"));
+
+document.body.append(html);
+```
+
 ## Using Screen
 
 ```js
@@ -99,6 +132,19 @@ function HelloMessage(name) {
   return _("div", "Hello  " + name);
 }
 
+
+/*
+
+when using router and screens
+
+cradova will create a div with data-cra-id=cradova-app-wrapper
+
+if it already exist cradova will use it instead
+
+so if you want to use your own mount point then create a div with data-cra-id="cradova-app-wrapper"
+
+*/
+
 const home = new Screen({
   name: "hello page", // page title
   template: HelloMessage,
@@ -108,24 +154,25 @@ const home = new Screen({
 Router.route("/", home);
 
 // navigates to that page
-// Router.navigate("/home");
+// Router.navigate("/home", data, force);
 // get the page ready in the background
 // Router.packageScreen("/home");
+// get route params for this page
+// Router.getParams();
 
 ```
 
 ## State management
 
 ```js
-// we have
 
-// dispatch - global (element) requires state ID
 
-// element can have this.updateState when shouldUpdate is true
+ // element can have this.updateState when the shouldUpdate props is true
 
-// Ref components (global and local)
+// Ref components
 
 // state can be managed from a store when using createSignal or simpleStores
+// this method is not yet documented
 
 import _, { Ref } from "cradova";
 
@@ -175,6 +222,15 @@ const nameRef = new Ref(function ( name ) {
   });
 });
 
+/*
+cradova Ref are component objects
+with methods for rendering, pre-rendering, and updating a it dom elements.
+
+Ref also has the feature to stash input values need by the components
+
+*/
+
+
 function Home() {
   return _("div.foo#bar",
    counter,
@@ -190,6 +246,28 @@ const home = new Screen({
   ...
 });
 
+/*
+
+Nice things about cradova screens
+
+screens are rendered once by default to hack
+responsiveness making your app work fast as user navigates.
+
+this behavior can be override
+by passing
+prerender: false
+in the constructor
+
+
+Cradova screens has
+onActivate() and
+onDeactivate() methods
+
+these allow you manage rendering
+circle for each in your app
+
+*/
+
 Router.route("/", home);
 ```