cradova 2.3.0 → 3.0.0

package/README.md

@@ -41,7 +41,11 @@
 
 Cradova is a web development framework for building Single Page Applications and PWAs.
 
-It's a fast, simple and modern, it provides state management, routing system and a rest API utility out of the box.
+It's a fast, simple and modern, with powerful state management and routing system.
+
+```
+No matter how complex your UI, cradova helps you build fast, reactivity and scalable web apps.
+```
 
 Cradova follows the [VJS specification](https://github.com/fridaycandour/cradova/blob/main/spec.md)
 
@@ -58,7 +62,7 @@ Undoubtedly, this provides a significant advantage. You can experience it firsth
 
 Cradova has already been utilized in multiple production projects, and we will continuously update this page to showcase our advancements as we keep improving.
 
-[current version changes](https://github.com/fridaycandour/cradova/blob/main/CHANGELOG.md#v220)
+[current version changes](https://github.com/fridaycandour/cradova/blob/main/CHANGELOG.md#v300)
 
 ## Installation
 
@@ -109,42 +113,7 @@ this a collection of basic examples
 you can choose any that best suite what problem you want to solve
 
 ```js
-import _, {
-  button,
-  createSignal,
-  Ref,
-  reference,
-  h1,
-  br,
-  div,
-} from "../dist/index.js";
-
-function Hello(name) {
-  return h1("Hello " + name, {
-    className: "title",
-    style: {
-      color: "grey",
-    },
-  });
-}
-
-const html = div(Hello("peter"), Hello("joe"));
-
-// reference (not state)
-
-function typingExample() {
-  const re = new reference();
-  return _(
-    "div",
-    input({
-      oninput() {
-        re.text.innerText = this.value;
-      },
-      placeholder: "typing simulation",
-    }),
-    p(" no thing typed yet!", { reference: re.bindAs("text") })
-  );
-}
+import _, { button, createSignal, Ref, reference, h1, br, div } from "cradova";
 
 // setting shouldUpdate to true
 // gives you this.updateState binding
@@ -152,10 +121,9 @@ function typingExample() {
 function counter() {
   let num = 0;
   return _("h1| 0", {
-    shouldUpdate: true,
     onclick() {
       num++;
-      this.updateState({ text: num });
+      this.innerText = num;
     },
   });
 }
@@ -164,11 +132,11 @@ function counter() {
 
 function dataCounter() {
   return _("h1| 0", {
-    shouldUpdate: true,
     "data-num": "0",
     onclick() {
       const num = this.getAttribute("data-num") * 1 + 1;
-      this.updateState({ text: num, "data-num": num });
+      this.setAttribute("data-num",  num });
+      this.innerText = num;
     },
   });
 }
@@ -177,13 +145,10 @@ function dataCounter() {
 
 function HelloMessage() {
   return div({
-    shouldUpdate: true,
     text: "Click to get a greeting",
     onclick() {
       const name = prompt("what are your names");
-      this.updateState({
-        text: name ? "hello " + name : "Click to get a greeting",
-      });
+      this.innerText = name ? "hello " + name : "Click to get a greeting";
     },
   });
 }
@@ -203,6 +168,22 @@ const nameRef = new Ref(function (name) {
   });
 });
 
+// reference (not state)
+
+function typingExample() {
+  const re = new reference();
+  return _(
+    "div",
+    input({
+      oninput() {
+        re.text.innerText = this.value;
+      },
+      placeholder: "typing simulation",
+    }),
+    p(" no thing typed yet!", { reference: re.bindAs("text") })
+  );
+}
+
 function App() {
   return div(counter, dataCounter, HelloMessage, br, nameRef);
 }
@@ -227,7 +208,7 @@ import _, {
   p,
   Ref,
   reference,
-} from "../dist/index.js";
+} from "cradova";
 
 function TodoList() {
   // can be used to hold multiple references
@@ -458,6 +439,7 @@ We are currently working to [set](https://github.com/fridaycandour/cradova/blob/
 - UI component libraries for cradova
 - Sample projects
 - maintenance and promotion
+<!--
 
 ## Sponsor
 
@@ -465,4 +447,4 @@ Your support is appreciated and needed to advance Cradova for more performance a
 
 Sponsorships can be done via [Patreon](https://www.patreon.com/FridayCandour) and [KO-FI](https://www.ko-fi.com/fridaycandour).
 
-Both monthly-recurring sponsorships and one-time donations are accepted.
+Both monthly-recurring sponsorships and one-time donations are accepted. -->