ดาวน์โหลด cradova - ดาวน์โหลดซอร์สโค้ด cradova

โลโก้

cradova

สร้างแอพที่ทรงพลัง⚡แอปพลิเคชันได้อย่างง่ายดาย

สำรวจ? ️เอกสาร»

เข้าร่วมชุมชน รายงานข้อผิดพลาด คุณลักษณะการร้องขอ

Cradova คือ 3

 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 ( ) ) ;

2023 - มีอะไรใหม่? เงื่อนไข

 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 คืออะไร
ทำไม Cradova?
การติดตั้ง
ตัวอย่าง
เอกสาร
ขอความช่วยเหลือ
การบริจาค

Cradova คืออะไร?

Cradova เป็นกรอบการพัฒนาเว็บสำหรับการสร้างแอปพลิเคชันหน้าเดียวและ PWAS

Cradova เป็นไปตามข้อกำหนด VJS

ประโยชน์คืออะไร?

เร็วและง่ายด้วยสิ่งที่เป็นนามธรรมน้อยลง

Cradova ไม่ได้สร้างขึ้นบนอัลกอริทึม DOM หรือ DIFF แต่การจัดการของรัฐนั้นทำในแบบที่ง่ายง่ายและรวดเร็ว

นี่เป็นประโยชน์ที่ยิ่งใหญ่หรือไม่?

ไม่ต้องสงสัยเลยว่านี่เป็นข้อได้เปรียบที่สำคัญ

การเปลี่ยนแปลงเวอร์ชันปัจจุบัน

การติดตั้ง

จาก NPM

npm i cradova

แหล่งที่มาของ CDN

 <!-- 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 >

ตัวอย่าง

บางแง่มุมของ cradova ไม่ได้สะท้อนในตัวอย่างต่อไปนี้ ฟังก์ชั่นเพิ่มเติมจะถูกนำมาใช้ในเอกสารในอนาคต

องค์ประกอบพื้นฐานใน 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 ) ;

ตัวอย่างพื้นฐาน

นี่เป็นชุดตัวอย่างพื้นฐานที่สามารถให้แนวคิดบางอย่างกับคุณได้

 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 ( ) ) ;

รายการสิ่งที่ต้องทำง่ายๆ

มาดูตัวอย่าง Todolist ง่ายๆ

 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 ( ) ) ;

ทำงานกับหน้าและเราเตอร์

ซึ่งแตกต่างจากเพียงแค่ท้ายสิ่งของกับ DOM สิ่งที่ดีกว่าในการสร้างแอพคือการใช้ระบบการกำหนดเส้นทาง

เราเตอร์ Cradova เป็นโมดูลที่อนุญาตให้คุณทำสิ่งต่อไปนี้:

สร้างเส้นทางที่ระบุในแอปพลิเคชันของคุณช่วยคุณจัดการการนำทางแสดงหน้าบนเส้นทางฟังการเปลี่ยนแปลงการนำทางสร้างขอบเขตข้อผิดพลาดที่ระดับหน้านอกเหนือจากระดับคอมพ์

ลองตัวอย่างกันเถอะ

 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 changes

ข้อมูลเพิ่มเติม

ข้อมูลเพิ่มเติมเกี่ยวกับเราเตอร์ Cradova

แอพ Cradova ทุกตัวจะติดตั้งบน DIV พร้อมแอตทริบิวต์ Data-wrapper = "App"

หากมีอยู่แล้ว Cradova จะใช้แทน

Cradova จะสร้าง div ด้วย data-wrapper = "แอพ" หากไม่มีอยู่แล้ว

ดังนั้นหากคุณต้องการใช้จุดเมานต์ของคุณเองให้สร้าง div ด้วย data-wrapper = "แอป"

ข้อมูลเพิ่มเติมเกี่ยวกับหน้า cradova

Cradova Pages มีวิธีการ onActivate () และ ondeactivate () ซึ่งมีอยู่ในฟังก์ชันส่วนประกอบบนตัวแปรนี้ผูกพันกับมัน

สิ่งนี้ช่วยให้คุณจัดการวงกลมการเรนเดอร์สำหรับแต่ละหน้าในแอปของคุณ

ข้อมูลเพิ่มเติมเกี่ยวกับ cradova comp

cradova comp เป็นคลาสองค์ประกอบแบบไดนามิกซึ่งจัดส่ง abstractions ง่าย ๆ เช่น:

สัญญาณ
useeffect
ใช้งาน
useref
ก่อน

พฤติกรรมเหล่านี้ช่วยให้คุณจัดการวงกลมการเรนเดอร์สำหรับคอมพ์ในแอพของคุณ

ข้อมูลเพิ่มเติมเกี่ยวกับ Cradova CreateSignal

สัญญาณ Cradova ช่วยให้คุณสร้างที่เก็บข้อมูลที่ทรงพลัง

ด้วยความสามารถในการ:

สร้างร้านค้า
สร้างการกระทำและยิงพวกเขา
ผูกคอมพ์
ฟังการเปลี่ยนแปลง
คงมีการเปลี่ยนแปลงในพื้นที่ท้องถิ่น

ด้วย abstractions ที่เรียบง่ายและง่ายเหล่านี้คุณสามารถเขียน DataStores ด้วยความสะดวกสบายมากมาย

เอกสาร

ในขณะนี้เราอยู่ในขั้นตอนการสร้างเว็บไซต์เอกสารสำหรับ Cradova และเรามีทรัพยากรที่ จำกัด หากคุณสนใจที่จะให้ยืมมือเราขอเชิญคุณเข้าร่วมชุมชนของเราได้รับประสบการณ์โดยตรงและมีส่วนร่วมในความก้าวหน้าของ Cradova

ขอความช่วยเหลือ

เพื่อรับข้อมูลเชิงลึกเพิ่มเติมและช่วยเหลือ Cradova โปรดไปที่การแชทชุมชน Discord และ Telegram

การบริจาค

ขณะนี้เรากำลังทำงานเพื่อตั้งค่าต่อไปนี้:

การสร้าง Cradova CLI (กำลังดำเนินการ)
เว็บไซต์เอกสาร Cradova
ตัวอย่างโครงการ
การบำรุงรักษาและส่งเสริมการขาย

 ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗
██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██
██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗
██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗
╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║
 ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝

MIT ได้รับใบอนุญาต

แหล่งที่มาเปิดและฟรี

เข้าร่วมกับเราทางโทรเลข

ข้อตกลงการบริจาคและใบอนุญาต

หากคุณมีส่วนร่วมรหัสในโครงการนี้คุณจะอนุญาตให้มีการแจกจ่ายรหัสของคุณภายใต้ใบอนุญาตเดียวกัน คุณกำลังตรวจสอบโดยปริยายว่ารหัสทั้งหมดเป็นงานต้นฉบับของคุณ

สนับสนุนการพัฒนา Cradova

การสนับสนุนของคุณเป็นพลังที่ดีสำหรับการเปลี่ยนแปลงเมื่อใดก็ตามที่คุณทำคุณสามารถมั่นใจได้ว่าโครงการการเติบโตของเรา Cradova, Cradova, Jetpath ฯลฯ การเติบโตและการปรับปรุงโดยการสร้างผู้สนับสนุน GitHub อีกครั้งหรือคงที่

สนับสนุนผ่าน cryptos -