Benos

لماذا يتميّز

• المكوّنات تعمل مرة واحدة

  المكوّن دالة عادية تُنفَّذ مرة واحدة فقط. وعند تغيّر إشارة تُحدَّث روابط DOM التي تقرأها تحديداً: لا إعادة عرض ولا مقارنة Virtual DOM.

• الملكية افتراضياً

  التأثيرات والمستمعون والمراجع وعمليات التنظيف تنتمي إلى المالك الذي أنشأها وتُزال معه، فيصبح التفكيك حتمياً لا مجرد انضباط.

• TypeScript هي مدخل التصميم

  تُستنتج معاملات المسار من نص المسار، وتمر معاملات البحث عبر مرمّزات مُنمَّطة، وتغطي أنواع HTML وSVG المولَّدة كتابة TSX. والمعامل الخاطئ أو الناقص خطأ ترجمة.

• صغير ومُقاس

  حجم النواة نحو 4.3 كيلوبايت، والنواة مع DOM نحو 11 كيلوبايت. تعمل ميزانيات الحجم وحارس أداء مقابل Preact Signals وAlien Signals وSolid في التكامل المستمر عند كل تغيير.

• عمليات غير متزامنة تلغي نفسها

  تأخذ الموارد مصدراً متتبَّعاً ودالة جلب قابلة للإلغاء، وتحتفظ بالقيم القديمة أثناء إعادة التحميل، وتتجاهل الاستجابات المتجاوَزة. ويكشف Suspense المحتوى دفعة واحدة ويؤجل التأثيرات حتى الظهور.

• واجهة يسهل الوصول إليها وتملكها أنت

  19 مكوّناً مبنية على آلات حالة Zag.js مع سلوك لوحة المفاتيح والتركيز ودعم RTL. تنسخ أداة سطر الأوامر مصدراً قابلاً للتعديل إلى مشروعك بدل إخفائه في اعتمادية.

ابدأ الآن

1. 01أنشئ تطبيقاً. يعمل القالب مع npm وpnpm وYarn وBun ويأتي مع TypeScript وVite وVitest وESLint وPrettier.

   $npm create benos@latest my-appنسخ

2. 02ثبّت الاعتماديات وشغّل خادم التطوير.

   $cd my-app && npm install && npm run devنسخ

3. 03أو أضف Benos إلى مشروع Vite قائم. يجب أن تعمل إضافة Vite قبل أي تحويل JSX آخر.

   $npm install @benosjs/core @benosjs/dom @benosjs/compiler @benosjs/viteنسخ

4. 04اختيارياً أضف نظام الواجهة: هيّئ الرموز ثم انسخ المكوّنات التي تحتاجها.

   $npx benos init && npx benos add button input dialogنسخ

مثال

مكوّن أول. تعمل الدالة مرة واحدة، ويتحدّث رابط العدّاد في مكانه، ويتولى <Show> و<For> العرض الشرطي والعرض المفتاحي.

import { signal } from '@benosjs/core'
import { For, Show, render } from '@benosjs/dom'

const count = signal(0)
const items = signal(['one', 'two'])

function App() {
  return (
    <main>
      <button onClick={() => count.update((value) => value + 1)}>
        Count: {count()}
      </button>
      <Show when={count() > 0} fallback={<p>Start counting</p>}>
        <p>There is a count.</p>
      </Show>
      <For each={items()} by={(item) => item}>
        {(item) => <span>{item()}</span>}
      </For>
    </main>
  )
}

render(() => <App />, document.querySelector('#app') as HTMLElement)

ما الذي تتضمنه الحزم

• @benosjs/coreالإشارات والقيم المحسوبة والتأثيرات والملكية.
• @benosjs/domمحرّك عرض DOM دقيق التفاعل ووقت تشغيل المكوّنات.
• @benosjs/compilerمترجم TypeScript وJSX.
• @benosjs/viteتكامل Vite مع المترجم.
• @benosjs/routerمسارات مُنمَّطة ومحمّلات وتنقل.
• @benosjs/asyncموارد مملوكة وSuspense وانتقالات.
• @benosjs/primitivesمكيّفات آلات Zag.js سهلة الوصول.
• benosمكوّنات واجهة مملوكة المصدر وسجل وأداة سطر أوامر.
• @benosjs/eslint-pluginقواعد لاصطلاحات المكوّنات والخصائص.
• create-benosينشئ تطبيق Benos جديداً بـ TypeScript.

اعرف المزيد

• البدء↗
• مرجع الواجهة البرمجية↗
• دليل الموجّه↗
• دليل العمليات غير المتزامنة↗
• الانتقال من React↗
• مكوّنات الواجهة↗
• المعمارية↗