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는 단일 페이지 응용 프로그램 및 PWA를 구축하기위한 웹 개발 프레임 워크입니다.

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의 일부 측면은 다음 예에 반영되지 않습니다. 향후 문서에는 더 많은 기능이 수반됩니다.

크라도바의 기본 구성 요소

 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 라우터는 다음을 수행 할 수있는 모듈입니다.

내비게이션을 처리하는 데 도움이되는 지정된 경로 작성 경로에서 페이지를 렌더링하는 데 도움이됩니다. 내비게이션 변경 경청 Comp 레벨 외에 페이지 레벨에서 오류 경계를 만듭니다.

예를 들어 봅시다.

 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 앱은 속성 데이터 -wapper = "App"가있는 div에 마운트합니다.

이미 존재한다면 Cradova는 대신 사용합니다.

Cradova는 아직 존재하지 않으면 Data-Wrapper = "App"로 div를 생성합니다.

따라서 자신의 마운트 포인트를 사용하려면 Data-Wrapper = "App"로 div를 만듭니다.

Cradova 페이지에 대한 자세한 정보

Cradova 페이지에는 onActivate () 및 onDeactivate () 메소드가 있으며이 변수의 구성 요소 기능에서도 사용할 수 있습니다.

이를 통해 앱의 각 페이지에 대한 렌더링 서클을 관리 할 수 있습니다.

Cradova Comp.에 대한 자세한 정보

Cradova Comp는 동적 구성 요소 클래스로 간단한 추상화를 제공합니다.

신호
useeffect
usestate
useref
프레 렌더

이러한 동작은 앱에서 Comps의 렌더링 서클을 관리 할 수 있습니다.

Cradova CreateSignal에 대한 자세한 정보

Cradova 신호를 통해 강력한 데이터 저장소를 만들 수 있습니다.

능력으로 :

상점을 만듭니다
행동을 만들고 해고하십시오
comp
변화를 들어보세요
LocalStorage의 변경 사항을 지속하십시오

이러한 간단하고 쉬운 추상화를 통해 많은 편의로 데이터 스토어를 작성할 수 있습니다.

선적 서류 비치

현재 Cradova 용 문서 웹 사이트를 작성하는 과정에 있으며 자원이 제한되어 있습니다. 손을 빌려주는 데 관심이 있다면, 우리는 당신이 지역 사회에 가입하고, 직접 경험을 쌓고, 크라도바의 발전에 기여하도록 초대합니다.

도움을 받고 있습니다

Cradova에 대한 추가 통찰력과 도움을 받으려면 Discord and Telegram Community Chats를 방문하십시오.

기여

우리는 현재 다음을 설정하기 위해 노력하고 있습니다.

Cradova CLI 구축 (진행중인)
Cradova 문서 웹 사이트
샘플 프로젝트
유지 보수 및 홍보

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