cradova
1.0.0
Bangun Aplikasi Web ⚡ yang kuat dengan mudah
Jelajahi Dokumen?
Bergabunglah dengan komunitas. Laporkan bug. Meminta fitur
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 } ) ) ;Cradova adalah kerangka kerja pengembangan web untuk membangun aplikasi satu halaman dan PWAS.
Cradova mengikuti spesifikasi VJS
Cepat dan sederhana dengan abstraksi dan lebih sedikit dan mudah dikomposisikan.
Cradova tidak dibangun di atas algoritma DOM atau diff virtual. Sebaliknya, manajemen negara dilakukan dengan cara yang sederhana, mudah dan cepat.
Tidak diragukan lagi, ini memberikan keuntungan yang signifikan.
Versi saat ini berubah
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 > Beberapa aspek cradova tidak tercermin dalam contoh berikut. Fungsionalitas yang lebih banyak akan diperlukan di dokumen mendatang.
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 ) ; Ini kumpulan contoh dasar yang dapat memberi Anda beberapa ide
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 ( ) ) ; Mari kita lihat contoh todolis yang sederhana
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 ( ) ) ; Tidak seperti hanya menambahkan barang ke DOM, aplikasi yang lebih baik untuk membangun adalah menggunakan sistem perutean.
Cradova Router adalah modul yang memungkinkan Anda melakukan hal berikut:
Buat rute yang ditentukan di aplikasi Anda membantu Anda menangani navigasi membuat halaman pada rute mendengarkan perubahan navigasi Buat batas kesalahan pada level halaman selain dari level comp.
Mari kita coba contoh.
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 changesInfo lebih lanjut tentang router cradova
Setiap aplikasi cradova dipasang pada div dengan atribut data-wrapper = "app"
Jika sudah ada cradova akan menggunakannya sebagai gantinya.
Cradova akan membuat DIV dengan data-wrapper = "App" jika belum ada.
Jadi, jika Anda ingin menggunakan titik pemasangan Anda sendiri maka buat DIV dengan data-wrapper = "App".
Info lebih lanjut tentang halaman Cradova
Halaman cradova memiliki metode onactivate () dan ondeactivate () yang juga tersedia dalam fungsi komponen pada variabel ini yang terikat padanya.
Ini memungkinkan Anda mengelola lingkaran rendering untuk setiap halaman di aplikasi Anda
Info lebih lanjut tentang comp cradova
Cradova Comp adalah kelas komponen dinamis, yang mengirimkan abstraksi sederhana seperti:
Perilaku ini memungkinkan Anda mengelola lingkaran rendering untuk comps di aplikasi Anda
Info lebih lanjut tentang cradova createsignal
Sinyal cradova memungkinkan Anda untuk membuat penyimpanan data yang kuat.
dengan kemampuan untuk:
Dengan abstraksi yang sederhana dan mudah ini, Anda dapat menulis datastores dengan begitu banyak kenyamanan.
Saat ini, kami sedang dalam proses membuat situs web dokumentasi untuk Cradova, dan kami memiliki sumber daya yang terbatas. Jika Anda tertarik untuk memberikan bantuan, kami mengundang Anda untuk bergabung dengan komunitas kami, mendapatkan pengalaman langsung, dan berkontribusi pada kemajuan Cradova.
Untuk mendapatkan wawasan lebih lanjut dan membantu Cradova, kunjungi obrolan komunitas perselisihan dan telegram.
Kami sedang bekerja untuk mengatur yang berikut:
██████╗ ██████╗ █████═╗ ███████╗ ███████╗ ██╗ ██╗ █████╗
██╔════╝ ██╔══██╗ ██╔═╗██║ █ ██ ██╔═════╝█ ██║ ██║ ██╔═╗██
██║ ██████╔╝ ███████║ █ ██ ██║ ██ ██║ ██║ ██████╗
██║ ██╔══██╗ ██║ ██║ █ ██ ██║ ██ ╚██╗ ██╔╝ ██║ ██╗
╚██████╗ ██║ ██║ ██║ ██║ ███████╔╝ ████████ ╚███╔╝ ██║ ██║
╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝ ╚════╝ ╚══╝ ╚═╝ ╚═╝
Buka Sumber dan Gratis.
Bergabunglah dengan kami di Telegram.
Jika Anda berkontribusi kode untuk proyek ini, Anda secara implisit mengizinkan kode Anda didistribusikan di bawah lisensi yang sama. Anda juga secara implisit memverifikasi bahwa semua kode adalah karya asli Anda.
Dukungan Anda adalah kekuatan yang baik untuk perubahan kapan saja Anda melakukannya, Anda dapat memastikan proyek kami, pertumbuhan, cradova, cradova, jetpath dll, pertumbuhan dan peningkatan dengan membuat sponsor yang muncul kembali atau tetap untuk sponsor github:
Dukungan melalui cryptos -
bc1q228fnx44ha9y5lvtku70pjgaeh2jj3f867nwye0xd067560fDed3B1f3244d460d5E3011BC42C4E5d7ltc1quvc04rpmsurvss6ll54fvdgyh95p5kf74wppa6THag6WuG4EoiB911ce9ELgN3p7DibtS6vPBangun Aplikasi Web ⚡ yang kuat dengan mudah.
