cradova
1.0.0
Créez facilement les applications Web ⚡ ⚡ ⚡ ⚡ ⚡
Explorez les docs? ️ »
Rejoignez la communauté. Rapport Bug. Demande de demande
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 ( ) ) ; 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 } ) ) ;Crava est un cadre de développement Web pour la création d'applications à page unique et PWA.
Crava suit la spécification VJS
Rapide et simple avec et moins d'abstractions et pourtant facilement composable.
Crava n'est pas construit sur des algorithmes DOM ou Diff virtuels. Au lieu de cela, la gestion de l'État se fait d'une manière simple, facile et rapide.
Sans aucun doute, cela offre un avantage significatif.
Modifications de la version actuelle
npm i cradova <!-- 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 > Certains aspects de Crava ne se reflètent pas dans l'exemple suivant. Plus de fonctionnalités seront impliquées dans les futurs documents.
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 ) ; C'est une collection d'exemples de base qui peuvent vous donner quelques idées
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 ( ) ) ; Voyons un simple exemple todoliste
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 ( ) ) ; Contrairement à ajouter des choses au DOM, une meilleure application pour créer des applications consiste à utiliser un système de routage.
Le routeur Crava est un module qui vous permet de faire ce qui suit:
Créer des itinéraires spécifiés dans votre application Aidez à gérer la navigation Rendez-vous une page sur une route Écouter les modifications de navigation Créer une limite d'erreur au niveau de la page en dehors du niveau de comp.
Essayons un exemple.
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 changesPlus d'informations sur le routeur Crava
Chaque application Crava monte sur un div avec attribut data-wrapper = "app"
S'il existe déjà, Crava l'utilisera à la place.
Crava créera un div avec data-wrapper = "app" s'il n'existe pas déjà.
Donc, si vous souhaitez utiliser votre propre point de montage, créez un div avec data-wrapPapper = "App".
Plus d'informations sur les pages Crava
Crava Pages a des méthodes onactivate () et ondeactive () qui sont également disponibles dans la fonction composante de la variable liée.
Cela vous permet de gérer le cercle de rendu pour chaque page de votre application
Plus d'informations sur Crava Comp
Crava Comp est une classe de composants dynamiques, qui expédie des abstractions simples comme:
Ces comportements vous permettent de gérer le cercle de rendu pour les comps dans votre application
Plus d'informations sur Crava Createsignal
Crava Signals vous permet de créer des magasins de données puissants.
avec capacité à:
Avec ces abstractions simples et faciles, vous pouvez écrire des bandes de données avec tant de commodité.
Pour le moment, nous sommes en train de créer un site Web de documentation pour Crava, et nous avons des ressources limitées. Si vous êtes intéressé à prêter un coup de main, nous vous invitons à rejoindre notre communauté, à acquérir une expérience de première main et à contribuer à l'avancement de Crava.
Pour obtenir d'autres informations et aider sur Crava, visitez les conversations communautaires Discord and Telegram.
Nous travaillons actuellement à la configuration des éléments suivants:
██████╗ ██████╗ █████═╗ ███████╗ ███████╗ ██╗ ██╗ █████╗
██╔════╝ ██╔══██╗ ██╔═╗██║ █ ██ ██╔═════╝█ ██║ ██║ ██╔═╗██
██║ ██████╔╝ ███████║ █ ██ ██║ ██ ██║ ██║ ██████╗
██║ ██╔══██╗ ██║ ██║ █ ██ ██║ ██ ╚██╗ ██╔╝ ██║ ██╗
╚██████╗ ██║ ██║ ██║ ██║ ███████╔╝ ████████ ╚███╔╝ ██║ ██║
╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝ ╚════╝ ╚══╝ ╚═╝ ╚═╝
Open Source et GRATUIT.
Rejoignez-nous sur Telegram.
Si vous contribuez au code à ce projet, vous autorisez implicitement votre code à distribution sous la même licence. Vous vérifiez également implicitement que tout le code est votre travail d'origine.
Votre soutien est une bonne force pour le changement chaque fois que vous le faites, vous pouvez assurer nos projets, notre croissance, Crava, Crava, Jetpath, etc., la croissance et l'amélioration en faisant un parrainage réapproprié ou fixe aux sponsors GitHub:
Prise en charge via les cryptos -
bc1q228fnx44ha9y5lvtku70pjgaeh2jj3f867nwye0xd067560fDed3B1f3244d460d5E3011BC42C4E5d7ltc1quvc04rpmsurvss6ll54fvdgyh95p5kf74wppa6THag6WuG4EoiB911ce9ELgN3p7DibtS6vPCréez facilement les applications Web puissantes.
