скачать 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 - это структура веб -разработки для создания одностраничных приложений и PWAS.

Крэдова следует спецификации VJS

В чем выгода?

Быстрый и просто с и меньше абстракций, но при этом легко композиционный.

Крэдова не построена на виртуальных алгоритмах 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 >

Примеры

Некоторые аспекты Крэдовы не отражаются в следующем примере. В будущих документах будет связано больше функциональности.

Базовый компонент в Крэдове

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

Простой список тодо

Давайте посмотрим на простой пример тодолиста

 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 нарастает на div с атрибутом data-wrapper = "app"

Если он уже существует, Cradova будет использовать его вместо этого.

Cradova создаст Div с Data-wrapper = "app", если он еще не существует.

Поэтому, если вы хотите использовать свою собственную точку крепления, создайте Div с Data-wrapper = "app".

Больше информации о страницах Cradova

Cradova Pages имеет методы onActivate () и onDeactivate (), которые также доступны в компонентной функции на этой переменной, связанной с ним.

Это позволяет вам управлять кругом рендеринга для каждой страницы в вашем приложении

Больше информации о Cradova Comp

Cradova Comp - это динамический класс компонентов, который отправляет простые абстракции, такие как:

Сигнал
Использовать
USESTATE
USEREF
преранендер

Такое поведение позволяет вам управлять рендеринговым кругом для Comps в вашем приложении

Больше информации о Cradova CreateSignal

Сигналы Cradova позволяют создавать мощные хранилища данных.

с способностью:

Создать магазин
создавать действия и уволить их
связывать комп
Слушайте изменения
Постоянные изменения в LocalStorage

С этими простыми и легкими абстракциями вы можете написать данные на данные с таким большим удобством.

Документация

На данный момент мы находимся в процессе создания веб -сайта документации для Cradova, и у нас есть ограниченные ресурсы. Если вы заинтересованы в предоставлении руки, мы приглашаем вас присоединиться к нашему сообществу, получить первый опыт и внести свой вклад в развитие Cradova.

Получить помощь

Чтобы получить дальнейшее понимание и помочь в Cradova, посетите чаты сообщества Discord и Telegram.

Внося

В настоящее время мы работаем над тем, чтобы настроить следующее:

Создание CRADOVA CLI (в процессе)
Сайт документации Cradova
Образец проектов
техническое обслуживание и продвижение

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

MIT лицензирован

Открытый и бесплатный.

Присоединяйтесь к нам на Telegram.

Вклад и лицензионное соглашение

Если вы внесете вклад в этот проект, вы неявно разрешаете распределять ваш код по той же лицензии. Вы также неявно проверяете, что весь код является вашей оригинальной работой.

Поддержка развития Cradova

Ваша поддержка является хорошей силой для изменений в любое время, когда вы это делаете, вы можете обеспечить наши проекты, рост, Cradova, Cradova, Jetpath и т. Д.

Поддержка через криптографии -