cradovaダウンロードcradovaソースコードのダウンロード

クラドバ

強力な⚡ウェブアプリを簡単に構築します

？€docsを探索»

コミュニティに参加してください。バグを報告します。リクエスト機能

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は、シングルページアプリケーションとPWASを構築するためのWeb開発フレームワークです。

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

シンプルなTODOリスト

シンプルなトドリストの例を見てみましょう

 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 Routerは、次のことを可能にするモジュールです。

指定されたルートを作成するアプリケーションの作成ナビゲーションを処理するのに役立ちますルートでページをレンダリングしますナビゲーションの変更を聞き、コンプレベルとは別にページレベルでエラー境界を作成します。

例を試してみましょう。

 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アプリは、属性データWrapper = "App"を備えたDIVにマウントされます

それがすでに存在する場合、Cradovaは代わりにそれを使用します。

Cradovaは、既に存在しない場合は、data-wrapper = "APP"を使用してdivを作成します。

したがって、独自のマウントポイントを使用する場合は、data-wrapper = "app"を備えたDIVを作成します。

Cradovaページの詳細

Cradovaページには、onactivate（）およびondeactivate（）メソッドがあります。これは、この変数に結合したコンポーネント関数でも使用できます。

これにより、アプリ内の各ページのレンダリングサークルを管理できます

Cradova Compの詳細

Cradova Compは動的なコンポーネントクラスであり、次のような単純な抽象化を発揮します。

信号
Effectを使用します
uestate
useref
プレレンダー

これらの動作により、アプリのコンプのレンダリングサークルを管理することができます

Cradova Createsignalの詳細

Cradova信号を使用すると、強力なデータストアを作成できます。

能力を持って：

ストアを作成します
アクションを作成し、それらを発射します
コンプをバインドします
変更を聞いてください
LocalStorageの変更を持続します

これらのシンプルで簡単な抽象化により、非常に便利なデータストアを書くことができます。

ドキュメント

現時点では、CradovaのドキュメントWebサイトを作成する過程にあり、リソースが限られています。あなたが手を貸すことに興味があるなら、私たちはあなたに私たちのコミュニティに参加し、直接の経験を積んで、クラドバの進歩に貢献するように勧めます。

助けを得る

Cradovaのさらなる洞察と支援を得るには、Discord and Telegram Community Chatsをご覧ください。

貢献

現在、以下のセットアップに取り組んでいます。

CradovaCliの構築（進行中）
CradovaドキュメントWebサイト
サンプルプロジェクト
メンテナンスとプロモーション

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