تنزيل 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 هو إطار لتطوير الويب لبناء تطبيقات صفحة واحدة و PWAs.

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 لا تنعكس في المثال التالي. سوف تستلزم المزيد من الوظائف في مستندات المستقبل.

مكون أساسي في كرادوفا

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

العمل مع Page و Router

على عكس فقط إلحاق الأشياء بـ DOM ، فإن أفضل إنشاء تطبيقات هو استخدام نظام التوجيه.

جهاز توجيه Cradova هو وحدة يتيح لك القيام بما يلي:

إنشاء طرق محددة في تطبيقك تساعدك على التعامل مع التنقل في تقديم صفحة على مسار استمع إلى تغييرات التنقل ، قم بإنشاء حدود خطأ على مستوى الصفحة بصرف النظر عن مستوى شركات.

لنجرب مثالًا.

 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 مع سمة بيانات wrapper = "التطبيق"

إذا كانت موجودة بالفعل ، فسيستخدمها Cradova بدلاً من ذلك.

ستقوم Cradova بإنشاء Div مع بيانات البيانات = "التطبيق" إذا لم يكن موجودًا بالفعل.

لذلك إذا كنت ترغب في استخدام نقطة التثبيت الخاصة بك ، فقم بإنشاء div مع data-wrapper = "app".

مزيد من المعلومات حول صفحات Cradova

تحتوي صفحات Cradova على طرق onActivate () و onDeactive () التي تتوفر أيضًا في وظيفة المكون على هذا المتغير المرتبط به.

هذا يتيح لك إدارة دائرة تقديم لكل صفحة في تطبيقك

مزيد من المعلومات حول Cradova Comp

Cradova Comps هي فئة مكون ديناميكية ، والتي تشحن تجريدات بسيطة مثل:

إشارة
useEffect
Usestate
useref
Prerender

تتيح لك هذه السلوكيات إدارة دائرة التقديم لـ Comps في تطبيقك

مزيد من المعلومات حول Cradova CreateSignal

تتيح لك إشارات Cradova إنشاء متاجر بيانات قوية.

مع القدرة على:

إنشاء متجر
قم بإنشاء إجراءات وإطلاقها
ربط شركات
استمع إلى التغييرات
استمرت التغييرات في LocalStorage

من خلال هذه التجريدات البسيطة والسهلة ، يمكنك كتابة بيانات البيانات مع الكثير من الراحة.

الوثائق

في الوقت الحالي ، نحن بصدد إنشاء موقع توثيق لـ Cradova ، ولدينا موارد محدودة. إذا كنت مهتمًا بإقراض يد ، فإننا ندعوك للانضمام إلى مجتمعنا ، واكتساب الخبرة المباشرة ، والمساهمة في تقدم Cradova.

الحصول على المساعدة

للحصول على مزيد من الأفكار والمساعدة في Cradova ، تفضل بزيارة دردشات مجتمع Discord و Telegram.

المساهمة

نعمل حاليًا على إعداد ما يلي:

بناء Cradova CLI (قيد التقدم)
موقع الوثائق Cradova
مشاريع عينة
الصيانة والترويج

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

معهد ماساتشوستس للتكنولوجيا مرخصة

مفتوح من مصادر ومجانية.

انضم إلينا في Telegram.

اتفاقية المساهمة والترخيص

إذا كنت تساهم في رمز في هذا المشروع ، فأنت تسمح لتوزيع الكود الخاص بك ضمنيًا بموجب نفس الترخيص. أنت أيضًا تتحقق ضمنيًا من أن جميع التعليمات البرمجية هي عملك الأصلي.

دعم تنمية كرادوفا

دعمكم قوة جيدة للتغيير في أي وقت تقوم فيه بذلك ، يمكنك التأكد من أن مشاريعنا ونمونا و Cradova و Cradova و JetPath وما إلى ذلك ، والنمو والتحسين من خلال إجراء رعاية إعادة للدراسة أو ثابتة لرعاة Github:

الدعم عبر التشفير -