Download do cradova - Download do Código Fonte cradova

Logotipo

CRADOVA

Construir aplicativos poderosos com facilidade com facilidade

Explore os documentos?

Junte -se à comunidade. Relatório bug. Recurso de solicitação

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 - O que há de novo? Condicionais

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

Conteúdo

O que é CRADOVA
Por que cradova?
Instalação
Exemplos
Documentação
Obtendo ajuda
Contribuindo

O que é CRADOVA?

O CRADOVA é uma estrutura de desenvolvimento da Web para criar aplicativos de página única e PWAs.

CRADOVA segue a especificação VJS

Qual é o benefício?

Rápido e simples com e menos abstrações e, no entanto, facilmente composível.

O CRADOVA não é construído sobre os algoritmos Virtual DOM ou Diff. Em vez disso, a gestão do estado é feita de uma maneira simples, fácil e rápida.

Este é um grande benefício?

Sem dúvida, isso fornece uma vantagem significativa.

A versão atual muda

Instalação

Do npm

npm i cradova

Fontes de 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 >

Exemplos

Alguns aspectos de Corova não se refletem no exemplo a seguir. Mais funcionalidade serão envolvidas em documentos futuros.

Um componente básico em Corova

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

Amostras básicas

Esta é uma coleção de exemplos básicos que podem lhe dar algumas idéias

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

Lista simples de TODO

Vamos ver um exemplo Todolista simples

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

Trabalhando com página e roteador

Ao contrário de apenas anexar coisas ao DOM, é melhor criar aplicativos para usar um sistema de roteamento.

O roteador de Corova é um módulo que permite que você faça o seguinte:

Crie rotas especificadas no seu aplicativo Ajuda você a lidar com a navegação renderiza uma página em uma rota Ouça as alterações de navegação Crie um limite de erro no nível da página além do nível de comp.

Vamos tentar um exemplo.

 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

Mais informações

Mais informações sobre o roteador de Corova

Todo aplicativo CRADOVA monta em uma div com atributo data-wrapper = "aplicativo"

Se já existir, o Cradova o usará.

O CRADOVA criará uma div com data-wrapper = "app" se ainda não existir.

Portanto, se você deseja usar seu próprio ponto de montagem, crie uma div com data wrapper = "app".

Mais informações sobre as páginas de Corova

Os métodos de CRADOVA possuem métodos ONACTIVATE () e ONDACTIVATE (), que também estão disponíveis na função de componente nessa variável ligada a ele.

Isso permite que você gerencie o círculo de renderização para cada página em seu aplicativo

Mais informações sobre o CRADOVA COMP

CRADOVA COMP é uma classe de componente dinâmico, que envia abstrações simples como:

Sinal
useeffect
uso
Useref
preender

Esses comportamentos permitem que você gerencie o círculo de renderização para comps em seu aplicativo

Mais informações sobre CRADOVA CREATESSIGNAL

Os sinais do CRADOVA permitem criar lojas de dados poderosas.

com capacidade de:

Crie uma loja
Crie ações e demiti -las
vincular um comp
Ouça as mudanças
persistir mudanças no localStorage

Com essas abstrações simples e fáceis, você pode escrever dados de dados com tanta conveniência.

Documentação

No momento, estamos criando um site de documentação para o CRADOVA e temos recursos limitados. Se você estiver interessado em dar uma mão, convidamos você a ingressar em nossa comunidade, obter experiência em primeira mão e contribuir para o avanço de Corova.

Obtendo ajuda

Para obter mais informações e ajuda em Corova, visite as conversas da comunidade Discord e Telegram.

Contribuindo

Atualmente, estamos trabalhando para configurar o seguinte:

CLI CRADOVA (em andamento)
Site de documentação do CRADOVA
Projetos de amostra
manutenção e promoção

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

MIT licenciado

De origem aberta e grátis.

Junte -se a nós no Telegram.

Contribuição e Contrato de Licença

Se você contribuir com o código para este projeto, está implicitamente permitindo que seu código seja distribuído sob a mesma licença. Você também está implicitamente verificando que todo o código é o seu trabalho original.

Apoiando o desenvolvimento de Corova

Seu apoio é uma boa força para a mudança sempre que o fizer, você pode garantir que nossos projetos, crescimento, cristova, cristova, jetpath etc, crescimento e melhoria, fazendo um patrocínio recorrente ou fixo aos patrocinadores do GitHub:

Apoio via cripto -