{"id":21207147,"url":"https://github.com/CodeDynasty-dev/Cradova","last_synced_at":"2025-07-10T08:33:53.734Z","repository":{"id":57685577,"uuid":"501756044","full_name":"Uiedbook/cradova","owner":"Uiedbook","description":"Welcome to Cradova: Build Powerful ⚡ Web Apps with Ease","archived":false,"fork":false,"pushed_at":"2024-08-10T11:35:05.000Z","size":11181,"stargazers_count":23,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-13T09:57:40.430Z","etag":null,"topics":["dom","front-end-development","javascript","library","pwa","pwa-apps","typescript","web","web-app"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Uiedbook.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-09T17:54:22.000Z","updated_at":"2024-08-10T11:35:09.000Z","dependencies_parsed_at":"2023-10-04T19:22:47.375Z","dependency_job_id":"d4c55536-6f59-4b0e-9cd4-0564223e0f8e","html_url":"https://github.com/Uiedbook/cradova","commit_stats":{"total_commits":27,"total_committers":2,"mean_commits":13.5,"dds":0.07407407407407407,"last_synced_commit":"d0b5d9b23b87623b95f6df097c09c828e1bd6eb4"},"previous_names":["uiedbook/cradova","fridaycandour/cradova"],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uiedbook%2Fcradova","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uiedbook%2Fcradova/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uiedbook%2Fcradova/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uiedbook%2Fcradova/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Uiedbook","download_url":"https://codeload.github.com/Uiedbook/cradova/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225629836,"owners_count":17499295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","front-end-development","javascript","library","pwa","pwa-apps","typescript","web","web-app"],"created_at":"2024-11-20T20:57:54.084Z","updated_at":"2025-07-10T08:33:53.728Z","avatar_url":"https://github.com/Uiedbook.png","language":"TypeScript","funding_links":["https://github.com/sponsors/FridayCandour"],"categories":[],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/codedynasty-dev/cradova\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/CodeDynasty-dev/cradova/main/icon.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n\u003ch1 align=\"center\"\u003eCradova\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\nBuild Powerful ⚡ Web Apps with Ease\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://github.com/codedynasty-dev/cradova#examples\"\u003e\u003cstrong\u003eExplore the 🎙️ docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://t.me/codedynasty-devHQ\"\u003eJoin Community\u003c/a\u003e\n    .\n    \u003ca href=\"https://github.com/codedynasty-dev/cradova/issues\"\u003eReport Bug\u003c/a\u003e\n    .\n    \u003ca href=\"https://github.com/codedynasty-dev/cradova/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n![Contributors](https://img.shields.io/github/contributors/codedynasty-dev/cradova?color=dark-green)\n![Issues](https://img.shields.io/github/issues/codedynasty-dev/cradova)\n![License](https://img.shields.io/github/license/codedynasty-dev/cradova)\n[![npm Version](https://img.shields.io/npm/v/cradova.svg)](https://www.npmjs.com/package/cradova)\n[![License](https://img.shields.io/npm/l/cradova.svg)](https://github.com/cradova/cradova.js/blob/next/LICENSE)\n[![npm Downloads](https://img.shields.io/npm/dm/cradova.svg)](https://www.npmjs.com/package/cradova)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/cradova/cradova.js/blob/next/contributing.md)\n![Forks](https://img.shields.io/github/forks/codedynasty-dev/cradova?style=social)\n![Stargazers](https://img.shields.io/github/stars/codedynasty-dev/cradova?style=social)\n\n# Cradova is 3\n\n## 2025 - What's New? Function as reactive components\n\nthis can't be better anywhere XD\n\n```js\n// functional components\n\nconst Cradova = function () {\n  const [year, setYear] = useState(3, this);\n\n  return h1(\"Cradova is \" + year + \" yrs old in \", {\n    onclick() {\n      setYear((lastYear) =\u003e {\n        return lastYear + 1;\n      });\n    },\n  });\n};\n\n// add reactivity to a signal element.\nconst counterSignal = new Signal({ count: 0 });\nfunction count2() {\n  useEffect(() =\u003e {\n    let count = 0;\n    setInterval(() =\u003e {\n      count++;\n      counterSignal.publish(\"count\", count);\n    }, 1000);\n  }, this);\n\n  return h1(\" count: 0\", {\n    subscription: counterSignal.subscriber(\"count\", function ({ count }) {\n      this.innerText = \" count: \" + count;\n    }),\n  });\n}\n\n// converts to html and append to the Dom\ndocument.body.appendChild(div(Cradova));\n```\n\n## 2024 - What's New? Signals pub/sub\n\n```js\nimport { Signal, getSignal, $if, $ifelse, div, h1 } from \"cradova\";\n\nconst signal = new Signal({ name: \"john\" });\n\nfunction Hello() {\n  const name = getSignal(\"name\", this).name;\n  return div(\n    $if(name === \"john\", h1(\"Hello john\")),\n    $if(name === \"paul\", h1(\"Goodbye paul\")),\n    $ifelse(name === \"john\", h1(\"Hello john\"), h1(\"Hello Paul\"))\n  );\n}\n\nsignal.bind(\"name\", this);\nconst html = div(Hello);\ndocument.body.append(html);\n\nsetInterval(() =\u003e {\n  signal.publish(\"name\", \"paul\");\n}, 5000);\n```\n\n## 2023 - What's New? Conditionals\n\n```js\nimport { $case, $if, $ifelse, $switch, div, h1 } from \"cradova\";\n\nfunction Hello({ name }) {\n  return div(\n    $if(name === \"john\", h1(\"Hello john\")),\n    $if(name === \"paul\", h1(\"Goodbye paul\")),\n    $ifelse(name === \"john\", h1(\"Hello john\"), h1(\"Hello Paul\"))\n  );\n}\n\nconst html = div(Hello(\"john\"), Hello(\"paul\"));\n\nfunction whatsAllowed({ age }) {\n  return div(\n    $switch(\n      age,\n      $case(12, h1(\"too young\")),\n      $case(26, h1(\"you are welcome\")),\n      $case(52, h1(\"too old\"))\n    )\n  );\n}\n\ndocument.body.append(html, whatsAllowed({ age: 26 }));\n```\n\n## 2023 - What's New? Router\n\n```js\nRouter.BrowserRoutes({\n  \"/home\": home,\n});\n// creates these routes\nRouter.navigate(\"/home\", data);\n```\n\n## 2021 - first version\n\n...\n\n# Contents\n\n- [What is Cradova](#what-is-cradova)\n- [Why Cradova?](#whats-the-benefit)\n- [Installation](#installation)\n- [Examples](#examples)\n- [Documentation](#documentation)\n- [Getting Help](#getting-help)\n- [Contributing](#contributing)\n\n## What is Cradova?\n\nCradova is a web development framework for building Single Page Applications and\nPWAs.\n\nCradova follows the\n[VJS specification](https://github.com/codedynasty-dev/cradova/blob/main/VJS_spec/specification.md)\n\n## What's the benefit?\n\nFast and simple with and fewer abstractions and yet easily composable.\n\nCradova is not built on virtual DOM or diff algorithms. Instead, State\nmanagement is done in a way that is simple, easy and fast.\n\n## Is this a big benefit?\n\nUndoubtedly, this provides a significant advantage.\n\n[current version changes](https://github.com/codedynasty-dev/cradova/blob/main/CHANGELOG.md#v400)\n\n## Installation\n\n### From npm\n\n```bash\nnpm i cradova\n```\n\n### CDN sources\n\n```html\n\u003c!-- unpkg --\u003e\n\u003cscript src=\"https://unpkg.com/cradova/dist/index.js\"\u003e\u003c/script\u003e\n\u003c!--    js deliver --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/cradova/dist/index.js\"\u003e\u003c/script\u003e\n```\n\n## Examples\n\nSome aspects of Cradova are not reflected in the following example. More\nfunctionality will be entailed in future docs.\n\n## A basic component in Cradova\n\n```js\nimport { div, h1 } from \"cradova\";\n\nfunction Hello(name) {\n  return h1(\"Hello \" + name, {\n    className: \"title\",\n    style: {\n      color: \"grey\",\n    },\n  });\n}\n\nconst html = div(Hello(\"peter\"), Hello(\"joe\"));\n\ndocument.body.append(html);\n```\n\n## Basic Samples\n\nThis a collection of basic examples that can give you some ideas\n\n```js\nimport {\n  br,\n  button,\n  Function,\n  createSignal,\n  div,\n  h1,\n  reference,\n  useRef,\n} from \"cradova\";\n\n// hello message\n\nfunction HelloMessage() {\n  return div(\"Click to get a greeting\", {\n    onclick() {\n      const name = prompt(\"what are your names\");\n      this.innerText = name ? \"hello \" + name : \"Click to get a greeting\";\n    },\n  });\n}\n\n// reference (not state)\n\nfunction typingExample() {\n  const ref = useRef();\n  return div(\n    input({\n      oninput() {\n        ref.current(\"text\").innerText = this.value;\n      },\n      placeholder: \"typing simulation\",\n    }),\n    p(\" no thing typed yet!\", { reference: ref.bindAs(\"text\") })\n  );\n}\n\nfunction App() {\n  return div(typingExample, HelloMessage);\n}\n\ndocument.body.append(App());\n```\n\n## Simple Todo list\n\nLet's see a simple TodoList example\n\n```js\nimport {\n  button,\n  Function,\n  createSignal,\n  div,\n  h1,\n  input,\n  main,\n  p,\n  useRef,\n  useState,\n} from \"../dist/index.js\";\n\n// creating a store\nconst todoStore = new Signal({\n  todo: [\"take bath\", \"code coded\", \"take a break\"],\n});\n\n// create actions\nconst addTodo = function (todo: string) {\n  todoStore.publish(\"todo\", [...todoStore.store.todo, todo]);\n};\n\nconst removeTodo = function (todo: string) {\n  const ind = todoStore.store.todo.indexOf(todo);\n  todoStore.store.todo.splice(ind, 1);\n  todoStore.publish(\"todo\", todoStore.store.todo);\n};\n\n\nfunction TodoList() {\n  // can be used to hold multiple references\n  const referenceSet = useRef();\n  // bind Function to Signal\n  todoStore.subscribe(\"todo\", todoList);\n  // vjs\n  return main(\n    h1(`Todo List`),\n    div(\n      input({\n        placeholder: \"type in todo\",\n        reference: referenceSet.bindAs(\"todoInput\"),\n      }),\n      button(\"Add todo\", {\n        onclick() {\n          addTodo(\n            referenceSet.elem\u003cHTMLInputElement\u003e(\"todoInput\")!.value || \"\"\n          );\n          referenceSet.elem\u003cHTMLInputElement\u003e(\"todoInput\")!.value = \"\";\n        },\n      })\n    ),\n    todoList\n  );\n}\n\nconst todoList =  function () {\n  const data = this.pipes.get(\"todo\");\n  return div(\n    data.map((item: any) =\u003e\n      p(item, {\n        title: \"click to remove\",\n        onclick() {\n          removeTodo(item);\n        },\n      })\n    )\n  );\n};\ndocument.body.appendChild(TodoList());\n```\n\n## working with page and Router\n\nUnlike just appending stuff to the DOM, a better to build apps is to use a\nrouting system.\n\nCradova Router is a module that allows you do the following:\n\nCreate specified routes in you application help you handle navigation render a\npage on a route listen to Navigation changes create error boundary at page level\napart from Function level.\n\nlet's try an example.\n\n```js\nimport { Page, Router, useEffect } from \"cradova\";\n\nconst home = new Page({\n  name: \"home page\", // page title\n  template: () =\u003e div(template),\n});\n\n// in your routes.ts file\nRouter.BrowserRoutes({\n  // Ways to use paths and Pages\n  \"*\": home,\n  \"/home\": home,\n  \"/home?\": home,\n  \"/home/:name\": home,\n  // will be lazy loaded\n  \"/lazy-loaded-home\": async () =\u003e await import(\"./home\"),\n});\n// creates these routes\n\nRouter.navigate(\"/home\", data);\n// navigates to that page\n\nRouter.onPageEvent((lastRoute, newRoute) =\u003e {\n  console.log(lastRoute, newRoute);\n});\n// listen for navigation changes\n```\n\n### More info\n\n---\n\nMore info on Cradova Router\n\n---\n\nEvery Cradova app mounts on a div with attribute data-wrapper=\"app\"\n\nif it already exist Cradova will use it instead.\n\nCradova will create a div with data-wrapper=\"app\" if it doesn't exists already.\n\nso if you want to use your own mount point then create a div with\ndata-wrapper=\"app\".\n\n---\n\nMore info on Cradova pages\n\n---\n\nCradova pages has onActivate() and onDeactivate() methods which is also\navailable in the component function on the this variable bound to it.\n\nthis allow you manage rendering circle for each page in your app\n\n---\n\nMore info on Cradova Function\n\n---\n\nCradova Function is a dynamic component class, which ships simple abstractions like:\n\n- Signal\n- useEffect\n- useState\n- useRef\n- preRender\n\nthese behaviors allow you manage rendering circle for Functions in your app\n\n---\n\nMore info on Cradova createSignal\n\n---\n\nCradova Signals allows you to create powerful data stores.\n\nwith ability to:\n\n- create store\n- create actions and fire them\n- bind a Function\n- listen to changes\n- persist changes to localStorage\n\nWith these simple and easy abstractions, you can write datastores with so much\nconvenience.\n\n## Documentation\n\nAt the moment, we're in the process of creating a documentation website for\nCradova, and we have limited resources. If you're interested in lending a hand,\nwe invite you to join our community, gain firsthand experience, and contribute\nto the advancement of Cradova.\n\n## Getting Help\n\nTo get further insights and help on Cradova, visit the\n[Discord](https://discord.gg/b7fvMg38) and [Telegram](https://t.me/codedynasty-devHQ)\nCommunity Chats.\n\n## Contributing\n\nWe are currently working to\n[set](https://github.com/codedynasty-dev/cradova/blob/main/contributing.md) up the\nfollowing:\n\n- building Cradova CLI (in progress)\n- Cradova Documentation Website\n- Sample projects\n- maintenance and promotion\n\n```\n ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗\n██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██\n██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗\n██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗\n╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║\n ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝\n```\n\n## MIT Licensed\n\nOpen sourced And Free.\n\n### Contribution and License Agreement\n\nIf you contribute code to this project, you are implicitly allowing your code to\nbe distributed under same license. You are also implicitly verifying that all\ncode is your original work.\n\n## Supporting Cradova development\n\nYour Support is a good force for change anytime you do it, you can ensure Our\nprojects, growth, Cradova, Cradova, JetPath etc, growth and improvement by\nmaking a re-occurring or fixed sponsorship to\n[github sponsors](https://github.com/sponsors/FridayCandour):\n\nSupport via cryptos -\n\n- BTC: `bc1q228fnx44ha9y5lvtku70pjgaeh2jj3f867nwye`\n- ETH: `0xd067560fDed3B1f3244d460d5E3011BC42C4E5d7`\n- LTC: `ltc1quvc04rpmsurvss6ll54fvdgyh95p5kf74wppa6`\n- TRX: `THag6WuG4EoiB911ce9ELgN3p7DibtS6vP`\n\nBuild Powerful ⚡ Web Apps with Ease.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCodeDynasty-dev%2FCradova","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCodeDynasty-dev%2FCradova","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCodeDynasty-dev%2FCradova/lists"}