tiny jsx

tinyjsx

Tinyjsx هي مكتبة UI JavaScript خفيفة الوزن لتطوير واجهات المستخدم باستخدام مكونات وظيفية.

أحجام حزم GZIP

أحجام حزم بروتلي

---

الاستخدام

Tinyjsx يعرض واجهة برمجة التطبيقات التي تحاكي تنفيذ REACT Hooks الأخير ولكنه صغير جدًا.

TinyJSX يدعم المكونات الوظيفية فقط .

 import TinyJSX from 'tiny-jsx' ;
import { render } from 'tiny-jsx/dom' ;
import useEffect from 'tiny-jsx/hooks/useEffect' ;
import useState from 'tiny-jsx/hooks/useState' ;

function Clock ( ) {
  const [ tick , setTick ] = useState ( 0 ) ;
  useEffect ( ( ) => {
    const interval = setInterval ( ( ) => {
      setTick ( tick + 1 ) ;
    } , 1000 ) ;
    return ( ) => clearInterval ( interval ) ;
  } , [ tick ] ) ;

  return (
    < div > Seconds: { tick } </ div >
  ) ;
}

render ( < Clock /> , document . body ) ;

لأحجام حزمة أصغر يتم تصدير جميع الخطافات من تلقاء نفسها. لا يزال بإمكانك استيراد السنانير من المثال أعلاه مثل هذا:

 import { useState , useEffect } from 'tiny-jsx/hooks' ; 

أمثلة

يمكن العثور على بعض الأمثلة البسيطة في دليل الأمثلة. يمكنك أيضًا رؤية المكتبة قيد التنفيذ باستخدام UMD Builds هنا:

• ساعة
• تودوس
• جهاز التوجيه

ابدء

ثَبَّتَ

عند استخدام nodejs مع yarn أو npm

$ yarn add tiny-jsx
or
$ npm install --save tiny-jsx

أو في المتصفح

 < script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-hooks.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-dom.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-router.min.js " > </ script >

يستورد

تتيح مكتبة tiny-jsx استخدام الصادرات المسماة والافتراضية.

اسم الواردات المسمى:

 import { createElement } from 'tiny-jsx' ;

// Tell Babel to transform JSX into createElement() calls:
/** @jsx createElement */ 

الواردات الافتراضية:

 import TinyJSX from 'tiny-jsx' ;

// Tell Babel to transform JSX into TinyJSX.createElement() calls:
/** @jsx TinyJSX.createElement */

بدلاً من إعلان pragma @jsx ، يمكنك استخدامه على مستوى العالم عن طريق إضافته إلى ملف تكوين بابل الخاص بك

لبابل 5 و prior:

{ "jsxPragma" : " TinyJSX.createElement " }

بالنسبة إلى Babel 6: قم بتثبيت البرنامج المساعد تحويل CRANCE-REACT-JSX وأضفه إلى ملف التكوين:

{
  "plugins" : [
     [ " transform-react-jsx " , { "pragma" : " TinyJSX.createElement " }]
  ]
}

لـ Babel 7: قم بتثبيت البرنامج المساعد @babel/plugin transform-rect-jsx وأضفه إلى ملف التكوين:

{
  "plugins" : [
    [ " @babel/plugin-transform-react-jsx " , { "pragma" : " TinyJSX.createElement " , "pragmaFrag" : " TinyJSX.Fragment " }]
  ]
}

لإضافة TypeScript إلى tsconfig.json :

{
  "jsx" : " react " ,
  "jsxFactory" : " TinyJSX.createElement "
}

تقديم

تقوم وظيفة TinyJSX transpile بتحويل مكونات JSX إلى عناصر DOM الظاهرية (كما وصف هنا) . من أجل تقديم عناصر DOM الظاهرية في المتصفح ، يوفر TinyJSX وظيفة render() تنشئ شجرة DOM المقابلة ويجعلها في عنصر من شجرة DOM الموجودة.

 import TinyJSX from 'tiny-jsx' ;
import { render } from 'tiny-jsx/dom' ; 

render ( < div > Hello World! </ div > , document . body ) ;