cradova v3.3.8
2024 - What's New? Ref methods!
type dataType = { year: string, age: string };
const Header =
new Ref() <
dataType >
function (data = { year: "2023", age: "2" }) {
return header(h1("Cradova is " + data.age + " yrs old in " + data.year));
};
Header.define("increase", function (isNewYear) {
if (isNewYear) {
this.updateState({ year: "2024", age: "3" });
}
});
document.body.appendChild(Header.render());
Header.methods.increase(true);
2023 - What's New? Conditionals!
import { div, h1, $if, $ifelse, $case, $switch } 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?
Cradova is a web development framework for building Single Page Applications and PWAs.
It's a fast and simple framework, it provides an easy to use state management and router system.
Cradova follows the VJS specification
What's the benefit?
Cradova is aimed to be 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 more elegantly with a simple predictive model, simple and easy with all the speed.
Is this a big benefit?
Undoubtedly, this provides a significant advantage.
Cradova has already been utilized in multiple production projects, and we will continuously update this page to showcase our advancements as we keep improving.
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
Many 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 _, { button, createSignal, Ref, reference, h1, br, div } from "cradova";
const count = new Ref(function () {
const [count, setCounter] = useState(0, this);
setTimeout(() => {
setCounter(count + 1);
}, 1000);
return h1(" the current count is = " + count);
});
function counter() {
let num = 0;
return _("h1| 0", {
onclick() {
num++;
this.innerText = num;
},
});
}
// Another example with data- attribute
function dataCounter() {
return _("h1| 0", {
"data-num": "0",
onclick() {
const num = this.getAttribute("data-num") * 1 + 1;
this.setAttribute("data-num", num });
this.innerText = num;
},
});
}
// hello message
function HelloMessage() {
return div({
text: "Click to get a greeting",
onclick() {
const name = prompt("what are your names");
this.innerText = name ? "hello " + name : "Click to get a greeting";
},
});
}
// using CradovaRef
const nameRef = new Ref(function (name) {
const self = this;
return _("div.foo#bar", {
text: name
? "hello " + (name || " user 2")
: "Click to get a second greeting",
onclick() {
const name = prompt();
self.updateState(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(count, counter, dataCounter, HelloMessage, br, nameRef);
}
document.body.append(App());
Simple Todo list
Let's see a simple TodoList example
import _, {
// tags
div,
button,
main,
p,
input,
// allows you to create powerful data stores
createSignal,
// dom ref
useRef(),
// dynamic component class
Ref,
css,
} from "cradova";
function TodoList() {
// can be used to hold multiple references
const referenceSet = useRef();
// creating a store
const todoStore = new createSignal([
"take bath",
"code code code",
"take a break",
]);
// create actions
todoStore.createAction("add-todo", function (todo) {
this.set([...this.value, todo]);
});
todoStore.createAction("remove-todo", function (todo) {
const ind = this.value.indexOf(todo);
this.value.splice(ind, 1);
this.set(this.value);
});
// bind Ref to Signal
todoStore.bindRef(todoList);
// markup
return main(
_`|Todo List`,
div(
input({
placeholder: "type in todo",
reference: referenceSet.bindAs("todoInput"),
}),
button("Add todo", {
onclick() {
todoStore.fireAction("add-todo", referenceSet.todoInput.value);
referenceSet.todoInput.value = "";
},
})
),
todoList.render
);
}
const todoList = new Ref(function () {
const self = this;
return div(
self.Signal.value.map((item) =>
p(item, {
title: "click to remove",
onclick() {
self.Signal.fireAction("remove-todo", item);
},
})
)
);
});
document.body.appendChild(TodoList());
css`
body {
box-sizing: border-box;
display: flex;
}
main {
margin: auto;
}
main > p {
font-size: 2rem;
}
`;
working with screen 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 orchestrate navigation render a screen on a route pre-render a screen in the background if you want to. listen to Navigation changes create error boundary at screen level. persist rendered screens by default allow parallel screen rendering for every unique route scheme
let's try an example.
import _, { Screen, Router } from "cradova";
// Ref can be used as screens
const template = new Ref(function (name) {
// an effect run once after screen renders
const self = this;
self.effect(() => {
const name = new Promise((res) => {
res("john doe");
});
setTimeout(async () => {
self.updateState(await name);
}, 1000);
});
// effects can be used to make api calls needed for the page
return _("div", name ? ">>>>>>>> Hello " + name : " loading...");
});
const home = new Screen({
name: "home page", // page title
template,
});
// in your routes.ts file
Router.BrowserRoutes({
"/home": home,
"/lazy-loaded-home": async () => await import("./home"),
});
// creates these routes
Router.packageScreen("/home", data);
// get the page ready in the background
Router.navigate("/home", data);
// navigates to that page
Router.getParams();
// get route params for this current 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 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 persist: false in the constructor
Cradova screens 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 screen in your app
More info on Cradova Ref
Cradova Ref is a dynamic component class, which ships simple abstractions like:
- Effects
- stash
- preRender
- updateState
these behaviors allow you manage rendering circle for refs 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 Ref
- listen to changes
- persist changes to localStorage
- update a CradovaRef and bindings automatically
With these simple and easy abstractions, you can use datastores with powerful 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 our Discord and Telegram Community Chats.
Contributing
We are currently working to set up the following:
- building Cradova CLI (in progress)
- Cradova Documentation Website
- UI component libraries for cradova (The Sacho Project)
- Sample projects
- maintenance and promotion
██████╗ ██████╗ █████═╗ ███████╗ ███████╗ ██╗ ██╗ █████╗
██╔════╝ ██╔══██╗ ██╔═╗██║ █ ██ ██╔═════╝█ ██║ ██║ ██╔═╗██
██║ ██████╔╝ ███████║ █ ██ ██║ ██ ██║ ██║ ██████╗
██║ ██╔══██╗ ██║ ██║ █ ██ ██║ ██ ╚██╗ ██╔╝ ██║ ██╗
╚██████╗ ██║ ██║ ██║ ██║ ███████╔╝ ████████ ╚███╔╝ ██║ ██║
╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝ ╚════╝ ╚══╝ ╚═╝ ╚═╝
Apache Lincenced
Opensourced And Free.
Uiedbook is an open source team of web focused engineers, Our vision is to make the web better, improving and innovating infrastructures for a better web experience.
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-occuring or fixed sponsorship
to github sponsors:
or crypto using
etheruen: 0xD7DDD4312A4e514751A582AF725238C7E6dF206c
,
Bitcoin: bc1q5548kdanwyd3y07nyjjzt5zkdxqec4nqqrd760
or
LTC: ltc1qgqn6nqq6x555rpj3pw847402aw6kw7a25dc29w
.
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
7 months ago
6 months ago
9 months ago
5 months ago
7 months ago
9 months ago
7 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago