Descarga de cradova - Descarga del código fuente de cradova

Logo

Cradova

Crea potentes aplicaciones web con facilidad

Explore los Docios? ️ »

Únete a la comunidad. Informe de error. Solicitar la función

Cradova tiene 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 - ¿Qué hay de nuevo? Condicional

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

Contenido

¿Qué es Cradova?
¿Por qué Cradova?
Instalación
Ejemplos
Documentación
Obtener ayuda
Que contribuye

¿Qué es Cradova?

Cradova es un marco de desarrollo web para construir aplicaciones de una sola página y PWA.

Cradova sigue la especificación VJS

¿Cuál es el beneficio?

Rápido y simple con menos abstracciones y, sin embargo, fácilmente compuesto.

Cradova no se basa en algoritmos DOM o DIFF virtuales. En cambio, la gestión estatal se realiza de una manera simple, fácil y rápida.

¿Es este un gran beneficio?

Sin lugar a dudas, esto proporciona una ventaja significativa.

Cambios de versión actual

Instalación

De npm

npm i cradova

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

Ejemplos

Algunos aspectos de Cradova no se reflejan en el siguiente ejemplo. Se implicará más funcionalidad en futuros documentos.

Un componente básico en 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 ) ;

Muestras básicas

Esta es una colección de ejemplos básicos que pueden darle algunas ideas

 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 simple de tareas pendientes

Veamos un simple ejemplo de paradolista

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

Trabajando con Page y Router

A diferencia de solo agregar cosas al DOM, una mejor para crear aplicaciones es usar un sistema de enrutamiento.

El enrutador Cradova es un módulo que le permite hacer lo siguiente:

Crear rutas especificadas en su aplicación Ayuda a manejar la navegación Renderia en una ruta Escuchar los cambios de navegación Crear límite de error en el nivel de página aparte del nivel de comp.

Probemos un ejemplo.

 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

Más información

Más información sobre el enrutador Cradova

Cada aplicación de Cradova se monta en un DIV con Attribute Data-Wrapper = "Aplicación"

Si ya existe, Cradova lo usará en su lugar.

Cradova creará un DIV con Data-Wrapper = "App" si aún no existe.

Entonces, si desea usar su propio punto de montaje, cree un DIV con Data-Wrapper = "APP".

Más información sobre las páginas de Cradova

CRADOVA Pages tiene métodos OnActivate () y Ondeactivate () que también está disponible en la función de componente en esta variable vinculada a ella.

Esto le permite administrar el círculo de representación para cada página de su aplicación.

Más información sobre Cradova Comp

Cradova Comp es una clase de componentes dinámicos, que envía abstracciones simples como:

Señal
Usar efecto
usestar
useref
prerender

Estos comportamientos le permiten administrar el círculo de representación para las compensaciones en su aplicación.

Más información sobre Cradova CreateSignal

Cradova Signals le permite crear poderosas tiendas de datos.

con capacidad para:

Crear tienda
crear acciones y dispararlas
atar una composición
Escuche los cambios
Persistir cambios en LocalStorage

Con estas abstracciones simples y fáciles, puede escribir almacenes de datos con tanta conveniencia.

Documentación

Por el momento, estamos en el proceso de crear un sitio web de documentación para Cradova, y tenemos recursos limitados. Si está interesado en echarle una mano, lo invitamos a unirse a nuestra comunidad, obtener experiencia de primera mano y contribuir al avance de Cradova.

Obtener ayuda

Para obtener más información y ayuda en Cradova, visite los chats de la comunidad Discord y Telegram.

Que contribuye

Actualmente estamos trabajando para configurar lo siguiente:

Construyendo CRADOVA CLI (en progreso)
Sitio web de documentación de Cradova
Proyectos de muestra
Mantenimiento y promoción

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

MIT con licencia

De origen abierto y gratis.

Únase a nosotros en Telegram.

Acuerdo de contribución y licencia

Si contribuye con código a este proyecto, está permitiendo implícitamente que su código se distribuya bajo la misma licencia. También está verificando implícitamente que todo el código es su trabajo original.

Apoyo al desarrollo de Cradova

Su apoyo es una buena fuerza para el cambio en cualquier momento que lo haga, puede garantizar nuestros proyectos, crecimiento, cradova, cradova, jetpath, etc., crecimiento y mejora al hacer un patrocinio recurrente o fijo a los patrocinadores de GitHub:

Soporte a través de Cryptos -