Cradova is 3

const Cradova = new Comp(function () {
  const [year, setYear] = useState(3, this);

  return h1("Cradova is " + year + " yrs old in ", {
    onclick() {
      setYear((lastYear) => {
        return lastYear + 1;
      });
    },
  });
});

document.body.appendChild(Cradova.render());

2023 - What's New? Conditionals

import { $case, $if, $ifelse, $switch, div, h1 } from "cradova";

function Hello({ name }) {
  return div(
    $if(name === "john", h1("Hello john")),
    $if(name === "paul", h1("Goodbye paul")),
    $ifelse(name === "john", h1("Hello john"), h1("Hello Paul"))
  );
}

const html = div(Hello("john"), Hello("paul"));

function whatsAllowed({ age }) {
  return div(
    $switch(
      age,
      $case(12, h1("too young")),
      $case(26, h1("you are welcome")),
      $case(52, h1("too old"))
    )
  );
}

document.body.append(html, whatsAllowed({ age: 26 }));

Contents

• What is Cradova
• Why Cradova?
• Installation
• Examples
• Documentation
• Getting Help
• Contributing

What is Cradova?

Cradova is a web development framework for building Single Page Applications and PWAs.

Cradova follows the VJS specification

What's the benefit?

Fast and simple with and fewer abstractions and yet easily composable.

Cradova is not built on virtual DOM or diff algorithms. Instead, State management is done in a way that is simple, easy and fast.

Is this a big benefit?

Undoubtedly, this provides a significant advantage.

current version changes

Installation

From npm

npm i cradova

CDN sources

<!-- unpkg -->
<script src="https://unpkg.com/cradova/dist/index.js"></script>
<!--    js deliver -->
<script src="https://cdn.jsdelivr.net/npm/cradova/dist/index.js"></script>

Examples

Some aspects of Cradova are not reflected in the following example. More functionality will be entailed in future docs.

A basic component in Cradova

import { div, h1 } from "cradova";

function Hello(name) {
  return h1("Hello " + name, {
    className: "title",
    style: {
      color: "grey",
    },
  });
}

const html = div(Hello("peter"), Hello("joe"));

document.body.append(html);

Basic Samples

This a collection of basic examples that can give you some ideas

import {
  br,
  button,
  Comp,
  createSignal,
  div,
  h1,
  reference,
  useRef,
} from "cradova";

// hello message

function HelloMessage() {
  return div("Click to get a greeting", {
    onclick() {
      const name = prompt("what are your names");
      this.innerText = name ? "hello " + name : "Click to get a greeting";
    },
  });
}

// reference (not state)

function typingExample() {
  const ref = useRef();
  return div(
    input({
      oninput() {
        ref.current("text").innerText = this.value;
      },
      placeholder: "typing simulation",
    }),
    p(" no thing typed yet!", { reference: ref.bindAs("text") })
  );
}

function App() {
  return div(typingExample, HelloMessage);
}

document.body.append(App());

Simple Todo list

Let's see a simple TodoList example

import {
  button,
  Comp,
  createSignal,
  div,
  h1,
  input,
  main,
  p,
  useRef,
  useState,
} from "../dist/index.js";

// creating a store
const todoStore = new Signal({
  todo: ["take bath", "code coded", "take a break"],
});

// create actions
const addTodo = function (todo: string) {
  todoStore.publish("todo", [...todoStore.pipe.todo, todo]);
};

const removeTodo = function (todo: string) {
  const ind = todoStore.pipe.todo.indexOf(todo);
  todoStore.pipe.todo.splice(ind, 1);
  todoStore.publish("todo", todoStore.pipe.todo);
};


function TodoList() {
  // can be used to hold multiple references
  const referenceSet = useRef();
  // bind Comp to Signal
  todoStore.subscribe("todo", todoList);
  // vjs
  return main(
    h1(`Todo List`),
    div(
      input({
        placeholder: "type in todo",
        reference: referenceSet.bindAs("todoInput"),
      }),
      button("Add todo", {
        onclick() {
          addTodo(
            referenceSet.elem<HTMLInputElement>("todoInput")!.value || ""
          );
          referenceSet.elem<HTMLInputElement>("todoInput")!.value = "";
        },
      })
    ),
    todoList
  );
}

const todoList = new Comp(function () {
  const data = this.subData;
  return div(
    data.map((item: any) =>
      p(item, {
        title: "click to remove",
        onclick() {
          removeTodo(item);
        },
      })
    )
  );
});
document.body.appendChild(TodoList());

working with page and Router

Unlike just appending stuff to the DOM, a better to build apps is to use a routing system.

Cradova Router is a module that allows you do the following:

Create specified routes in you application help you handle navigation render a page on a route listen to Navigation changes create error boundary at page level apart from Comp level.

let's try an example.

import { Page, Router } from "cradova";

// Comp can be used as page template this way

const template = new Comp(function (name) {
  // an effect run once after page renders
  const self = this;
  self.effect(() => {
    const name = new Promise((res) => {
      res("john doe");
    });
    setTimeout(async () => {
      self.recall(await name);
    }, 1000);
  });
  // effects can be used to make api calls needed for the page
  return div(name ? ">>>>>>>>  Hello  " + name : "  loading...");
});

const home = new Page({
  name: "home page", // page title
  template: () => div(template),
});

// in your routes.ts file
Router.BrowserRoutes({
  // Ways to use paths and Pages
  "*": home,
  "/home": home,
  "/home?": home,
  "/home/:name": home,
  // will be lazy loaded
  "/lazy-loaded-home": async () => await import("./home"),
});
// creates these routes

Router.navigate("/home", data);
// navigates to that page

Router.onPageEvent((lastRoute, newRoute) => {
  console.log(lastRoute, newRoute);
});
// listen for navigation changes

More info

More info on Cradova Router

Every Cradova app mounts on a div with attribute data-wrapper="app"

if it already exist Cradova will use it instead.

Cradova will create a div with data-wrapper="app" if it doesn't exists already.

so if you want to use your own mount point then create a div with data-wrapper="app".

More info on Cradova pages

Cradova pages has onActivate() and onDeactivate() methods which is also available in the component function on the this variable bound to it.

this allow you manage rendering circle for each page in your app

More info on Cradova Comp

Cradova Comp is a dynamic component class, which ships simple abstractions like:

• Signal
• useEffect
• useState
• useRef
• preRender

these behaviors allow you manage rendering circle for Comps in your app

More info on Cradova createSignal

Cradova Signals allows you to create powerful data stores.

with ability to:

• create store
• create actions and fire them
• bind a Comp
• listen to changes
• persist changes to localStorage

With these simple and easy abstractions, you can write datastores with so much convenience.

Documentation

At the moment, we're in the process of creating a documentation website for Cradova, and we have limited resources. If you're interested in lending a hand, we invite you to join our community, gain firsthand experience, and contribute to the advancement of Cradova.

Getting Help

To get further insights and help on Cradova, visit the Discord and Telegram Community Chats.

Contributing

We are currently working to set up the following:

• building Cradova CLI (in progress)
• Cradova Documentation Website
• Sample projects
• maintenance and promotion

 ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗
██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██
██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗
██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗
╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║
 ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝

MIT Licensed

Open sourced And Free.

Join Us on telegram.

Contribution and License Agreement

If you contribute code to this project, you are implicitly allowing your code to be distributed under same license. You are also implicitly verifying that all code is your original work.

Supporting Cradova development

Your Support is a good force for change anytime you do it, you can ensure Our projects, growth, Cradova, Cradova, JetPath etc, growth and improvement by making a re-occurring or fixed sponsorship to github sponsors:

Support via cryptos -

• BTC: bc1q228fnx44ha9y5lvtku70pjgaeh2jj3f867nwye
• ETH: 0xd067560fDed3B1f3244d460d5E3011BC42C4E5d7
• LTC: ltc1quvc04rpmsurvss6ll54fvdgyh95p5kf74wppa6
• TRX: THag6WuG4EoiB911ce9ELgN3p7DibtS6vP

Build Powerful ⚡ Web Apps with Ease.