cradova Download - cradova Source Code Download

Logo

Cradova

Erstellen Sie mühelos leistungsstarke ⚡ Web -Apps

Entdecken Sie die? Euen Dokumente »

Treten Sie der Community bei. Fehler melden. Anforderungsfunktion

Cradova ist 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 - Was ist neu? Bedingungen

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

Inhalt

Was ist Cradova
Warum Cradova?
Installation
Beispiele
Dokumentation
Hilfe bekommen
Beitragen

Was ist Cradova?

CRADOVA ist ein Webentwicklungsrahmen für das Erstellen von Einzelseiten -Anwendungen und PWAs.

Cradova folgt der VJS -Spezifikation

Was ist der Nutzen?

Schnell und einfach mit und weniger Abstraktionen und dennoch leicht zusammenzusetzen.

Cradova basiert nicht auf virtuellen DOM- oder Diff -Algorithmen. Stattdessen erfolgt das staatliche Management auf eine Weise, die einfach, einfach und schnell ist.

Ist das ein großer Vorteil?

Zweifellos bietet dies einen erheblichen Vorteil.

Aktuelle Version ändert sich

Installation

Von npm

npm i cradova

CDN -Quellen

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

Beispiele

Einige Aspekte von Cradova spiegeln sich im folgenden Beispiel nicht wider. Weitere Funktionen werden in zukünftige Dokumente mitgefügt.

Eine Grundkomponente in 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 ) ;

Grundproben

Dies ist eine Sammlung grundlegender Beispiele, mit denen Sie einige Ideen geben können

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

Einfache Todo -Liste

Sehen wir uns ein einfaches Beispiel für Todolisten an

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

Arbeiten mit Seite und Router arbeiten

Im Gegensatz zum Anhang nur an das DOM ist ein besseres Erstellen von Apps darin, ein Routing -System zu verwenden.

Cradova Router ist ein Modul, mit dem Sie Folgendes machen können:

Erstellen Sie bestimmte Routen in Ihrer Anwendung. Helfen Sie, Navigation zu verarbeiten. Rendern Sie eine Seite auf einer Route. Hören Sie Navigationsänderungen. Änderungen Erstellen Sie die Fehlergrenze auf Seitenebene abgesehen von der COMP -Ebene.

Versuchen wir ein Beispiel.

 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

Weitere Informationen

Weitere Informationen zum Cradova -Router

Jede Cradova-App montiert auf einem DIV mit Attribut data-wrapper = "App"

Wenn es bereits existiert, wird Cradova es stattdessen verwenden.

Cradova erstellt ein DIV mit Data-Wrapper = "App", wenn es noch nicht existiert.

Wenn Sie also Ihren eigenen Mountspunkt verwenden möchten, erstellen Sie ein DIV mit Data-Wrapper = "App".

Weitere Informationen zu Cradova -Seiten

CRADOVA PAGES hat Methoden () und Ondeactivate () in der Komponentenfunktion in dieser Variablen, die an sie gebunden ist, in aktivierter Methoden zur Verfügung stehen.

Auf diese Weise können Sie den Rendering Circle für jede Seite in Ihrer App verwalten

Weitere Informationen zu Cradova Comp

Cradova Comp ist eine dynamische Komponentenklasse, die einfache Abstraktionen wie:

Signal
Verwendungseffekt
ussten
Usef
Vorranger

Mit diesen Verhaltensweisen können Sie den Rendering Circle für Comps in Ihrer App verwalten

Weitere Informationen zu Cradova Createssignal

Mit Cradova -Signalen können Sie leistungsstarke Datenspeicher erstellen.

mit Fähigkeit zu:

Geschäft erstellen
Erstellen Sie Aktionen und feuern Sie sie ab
Binden Sie einen Comp
Hören Sie sich Änderungen an
Beständige Änderungen an LocalStorage

Mit diesen einfachen und einfachen Abstraktionen können Sie Datenspeicher mit so viel Bequemlichkeit schreiben.

Dokumentation

Im Moment sind wir gerade dabei, eine Dokumentations -Website für Cradova zu erstellen, und haben nur begrenzte Ressourcen. Wenn Sie eine Hand ausleihen möchten, laden wir Sie ein, sich unserer Community beizutreten, aus erster Hand zu sammeln und zur Weiterentwicklung von Cradova beizutragen.

Hilfe bekommen

Um weitere Einblicke zu erhalten und bei Cradova zu helfen, besuchen Sie die Chats Discord and Telegram Community.

Beitragen

Wir arbeiten derzeit daran, Folgendes einzurichten:

Bau von Cradova CLI (in Arbeit)
CRADOVA -Dokumentation Website
Beispielprojekte
Wartung und Werbung

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

MIT lizenziert

Offen und kostenlos.

Begleiten Sie uns im Telegramm.

Beitrags- und Lizenzvereinbarung

Wenn Sie Code zu diesem Projekt einbringen, erlauben Sie implizit, dass Ihr Code unter derselben Lizenz verteilt wird. Sie überprüfen auch implizit, dass jeder Code Ihre ursprüngliche Arbeit ist.

Unterstützung von Cradova -Entwicklung

Ihre Unterstützung ist eine gute Kraft für Veränderungen, soweit Sie dies tun. Wenn Sie dies tun, können Sie sicherstellen, dass unsere Projekte, Wachstum, Cradova, Cradova, JetPath usw., Wachstum und Verbesserung durch eine wiederkehrende oder feste Sponsoring für Github-Sponsoren vorgenommen werden:

Unterstützung über Kryptos -