Cradova
Build web apps that are fast, small, and simple.
Explore the ๐๏ธ docs ยป
Join Community
.
Report Bug
.
Request Feature
[](https://www.npmjs.com/package/cradova)
[](https://github.com/cradova/cradova.js/blob/next/LICENSE)
[](https://www.npmjs.com/package/cradova)
[](https://github.com/cradova/cradova.js/blob/next/contributing.md)
## Component in Cradova
```js
import { div, h1 } from "cradova";
function Hello(ctx) {
const [name, setName] = ctx.useState("");
return div(
h1("Hello " + name, {
className: "title",
style: {
color: "grey",
},
}),
input({
oninput(e){
setName(e.target.value);
}
}),
)
}
document.body.append(div(hello)); //
```
# Contents
- [What is Cradova](#what-is-cradova)
- [Why Cradova?](#whats-the-benefit)
- [Installation](#installation)
- [Examples](#examples)
- [Documentation](#documentation)
- [Getting Help](#getting-help)
- [Contributing](#contributing)
## Why Cradova?
Cradova is not react, it's simpler, faster for most components and basically bare javascript syntax, no bundler needed.
And.
Cradova follows the
[VJS specification](https://github.com/codedynasty-dev/cradova/blob/main/VJS_spec/specification.md)
## 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 even based and only affect dom parts is updated, least repaint, done in a way that is simple, easy and fast.
## Is this a big benefit?
Undoubtedly, this provides a significant advantage.
[current version changes](https://github.com/codedynasty-dev/cradova/blob/main/CHANGELOG.md#v400)
## Installation
### From npm
```bash
npm i cradova
```
### CDN sources
```html
```
## Basic Samples
This a collection of basic examples that can give you some ideas
```js
import {
br,
button,
Function,
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
```js
import {
button,
Function,
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.store.todo, todo]);
};
const removeTodo = function (todo: string) {
const ind = todoStore.store.todo.indexOf(todo);
todoStore.store.todo.splice(ind, 1);
todoStore.publish("todo", todoStore.store.todo);
};
function TodoList() {
// can be used to hold multiple references
const referenceSet = useRef();
// bind Function 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("todoInput")!.value || ""
);
referenceSet.elem("todoInput")!.value = "";
},
})
),
todoList
);
}
const todoList = function () {
const data = this.pipes.get("todo");
return div(
data.map((item: any) =>
p(item, {
title: "click to remove",
onclick() {
removeTodo(item);
},
})
)
);
};
document.body.appendChild(TodoList());
```
## Getting Help
To get further insights and help on Cradova, visit the
[Discord](https://discord.gg/b7fvMg38) and [Telegram](https://t.me/codedynasty-devHQ)
Community Chats.
## Contributing
We are currently working to
[set](https://github.com/codedynasty-dev/cradova/blob/main/contributing.md) up the
following:
- Cradova Docs
- Sample projects
- maintenance and promotion
```
โโโโโโโ โโโโโโโ โโโโโโโ โโโโโโโโ โโโโโโโโ โโโ โโโ โโโโโโ
โโโโโโโโ โโโโโโโโ โโโโโโโโ โ โโ โโโโโโโโโโ โโโ โโโ โโโโโโโ
โโโ โโโโโโโโ โโโโโโโโ โ โโ โโโ โโ โโโ โโโ โโโโโโโ
โโโ โโโโโโโโ โโโ โโโ โ โโ โโโ โโ โโโโ โโโโ โโโ โโโ
โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโ โโโโโโโโ โโโโโโ โโโ โโโ
โโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโ โโโโโโ โโโโ โโโ โโโ
```
## MIT Licensed
Open sourced And Free.
### 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](https://github.com/sponsors/FridayCandour):
Support via cryptos -
- BTC: `bc1q228fnx44ha9y5lvtku70pjgaeh2jj3f867nwye`
- ETH: `0xd067560fDed3B1f3244d460d5E3011BC42C4E5d7`
- LTC: `ltc1quvc04rpmsurvss6ll54fvdgyh95p5kf74wppa6`
- TRX: `THag6WuG4EoiB911ce9ELgN3p7DibtS6vP`
---
Build Powerful Web Apps. Ship Faster. Ship Smaller.