تُقرأ معلمة القيمة مرة واحدة عند بناء المكوّن، بينما تُقرأ معلمة الدالة عند كل update(). يعمل المكوّن نفسه مرة واحدة في الحالتين، ويثبت ذلك عدّاد التركيب.

المكوّنات

العناصر الفرعية والمعدّلات

يمرّر المكوّن عناصره الفرعية باستخدام النشر: بُناة ونصوص وكائنات سمات ومعدّلات. توضع الأجزاء الشرطية في when()، فلا يُعاد بناء المكوّن المحيط بها.

المكوّنات

هوية عناصر القائمة

تحتفظ list() بالصف ما دام عنصره في المصفوفة: أعد الترتيب وأدرج عناصر وغيّر أسماءها دون فقدان المدخلات أو التركيز. ينسخ مفتاح التبديل الكائنات عند كل تحديث ليوضح تكلفة كسر الهوية.

المكوّنات

بيانات متداخلة

فريق يضم أعضاء لكل منهم مهام: مكوّن لكل مستوى، واستدعاءات list() متداخلة، وعدّادات مشتقة بدوال تقرأ الكائنات نفسها. لا تُعدّل التغييرات العميقة إلا العقد المعنية.

المكوّنات

API

عرض صغير لكل لبنة أساسية، وهي العروض نفسها المضمّنة في التوثيق.

بُناة الوسوم

يستقبل الباني سمات وعناصر فرعية ثابتة ونصًا ديناميكيًا. يغيّر Rename الحالة ثم يستدعي update().

API

المكوّنات

المكوّن دالة عادية. يحتفظ كل استدعاء Counter() بعدّاده الخاص.

API

السمات

يمكن أن تكون قيم السمات دوال. يبدّل الزر الثاني busy ويستدعي update()؛ فتتبع سمات disabled وaria-busy لزر Save هذه القيمة.

API

الأحداث

onInput وonKeyDown سمتان عاديتان. اكتب ثم اضغط Escape للمسح.

API

دورة الحياة

يبدأ onMount مؤقتًا متكررًا ويُرجع دالة تنظيفه. تنفّذ إزالة التركيب دالة التنظيف، فيتوقف العد حتى يُركَّب المؤقت مجددًا.

API

تحديثات صريحة

لا يغيّر count++ سوى المتغير. يُحدَّث النص عند استدعاء update() التالي، سواء من الزر أو أي شيء آخر في الصفحة.

API

القيم الديناميكية

عدّل الاسم. حُدّد النص الثابت عند بناء العنصر، بينما يُعاد حساب النص الديناميكي عند كل update(). يعيد forceUpdate() بناء الشجرة، فيُحدَّث النص الثابت أيضًا.

API

update()

يشغّل كل استدعاء update() جميع القيم الديناميكية حتى لو لم تتغير بياناتها. تزيد العروض الأخرى في هذه الصفحة العدّاد أيضًا.

API

scope()

يضيف كلا الزرين عنصرًا ويغيّر اسم المستخدم. لا يحدّث update('cart') إلا اللوحة التابعة لذلك النطاق.

API

when()

يُختار أول شرط متحقق، وإلا تُعرض .else(). يُبنى كل فرع جديد من الصفر.

API

list()

تُطابق الصفوف بهوية الكائنات. حدّد مربع اختيار في صف ثم اضغط Reverse: ينتقل عنصر <li> نفسه بمربع الاختيار وكل محتوياته.

API

region() وinto()

تخطيط بمنطقة رئيسية مكدّسة ومنطقة جانبية تُملآن من خارجه. اكتب في Home، وافتح الحوار ثم أغلقه: يبقى النص. يملأ Article المنطقتين باستدعاء into() واحد.

API

forceUpdate()

يحدّث update() سطر lang الديناميكي فقط. يستدعي forceUpdate() الدالة App مجددًا ويعدّل عنصر <h1> نفسه. يعيد الشكل الصريح بناء هذه الشجرة وحدها، لا الصفحة بأكملها.

API

التنسيق

أنشئ أصناف CSS وادمجها واستخدم سمة صغيرة.

css()

أنشئ صنف CSS من كائن تنسيق واحد محدد الأنواع.

التنسيق

cx()

ادمج الأصناف بصورة شرطية. تكون الأولوية للتنسيقات اللاحقة.

التنسيق

النماذج

تحقق بدوال عادية تقرأ الحالة، مع حقول جرى التفاعل معها وخطوات وصفوف ديناميكية.

التحقق من الحقول

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

النماذج

معالج متعدد الخطوات

ثلاث خطوات كفروع when() فوق كائن بيانات واحد. يفعّل Next التحقق من حقول الخطوة ولا يتقدم إلا عند نجاحها. تعرض المراجعة كل البيانات مع روابط Edit.

النماذج

صفوف ديناميكية

بنود فاتورة في مصفوفة تُعرض باستخدام list(). يتحقق كل صف من بياناته، ويحسب الإجمالي الصفوف الصالحة فقط، وتحتفظ الصفوف بمدخلاتها عند إضافة غيرها أو حذفها.

النماذج

SVG

مخططات وتحريكات وأدوات وألعاب ببُناة SVG، تحركها بيانات عادية وأحداث المؤشر وupdate().

مخطط أعمدة

مستطيلات من مصفوفة. قيمتا y وheight دالتان للبيانات، لذا ينقل update() الأعمدة.

SVG

مخطط خطي

مسار تُبنى قيمة d له من النقاط، مع مساحة ذات تدرّج لوني ودائرة لكل نقطة.

SVG

مخطط حلقي

دائرة لكل شريحة. تمنح stroke-dasharray كل شريحة حصتها من الحلقة، وتحدد stroke-dashoffset بدايتها.

SVG

تحريك SVG

SMIL باستخدام البُناة: تجعل animateSvg الشمس تنبض، وتجعل animateTransformSvg الكوكب يدور. تحدد dur الديناميكية السرعة.

SVG

مقياس

قوس يمتلئ باستخدام stroke-dashoffset وإبرة تدور بتحويل CSS. كلاهما دالة لعدد واحد.

SVG

مخطط راداري

خمس قيم على خمسة محاور. الشكل مسار واحد تُحسب قيمة d له من البيانات، لذا يغيّر update() شكله.

SVG

خريطة حرارية

شبكة مستطيلات تتبع فيها fill-opacity مستوى القيمة. انقر خلية لزيادتها؛ ويشكّل عنصر titleSvg الفرعي تلميحها.

SVG

تلميح عند التحويم

أحداث المؤشر على عناصر SVG. تختار onPointerEnter النقطة النشطة وتنتقل إليها مجموعة التلميح.

SVG

محرر المنحنيات

اسحب مقابض منحنى بيزييه تكعيبي. تختار onPointerDown نقطة، وتنقلها onPointerMove على عنصر svg، فيتبعها المسار.

SVG

ساعة

العقارب خطوط، وقيمة transform لكل منها دالة للوقت. يبدأ onMount النبضات ويُرجع دالة التنظيف.

SVG

أيقونات متبدلة

أيقونة قائمة تتحول إلى علامة إغلاق بانتقالات CSS، وقلب ينبض بتحريك SMIL يبدأ عند النقر.

SVG

تدفق مباشر

تتحرك سلسلتان نحو اليسار بمؤقت. يجعل انتقال CSS بطول نبضة واحدة الحركة سلسة، ويمكن قراءة أي عينة بالتحويم.

SVG

مخطط شموع

أربعون موضعًا يقرأ كل منها شمعته. غيّر الإطار الزمني، أو بدّل المتوسط، أو حوّم لقراءة الأرقام، أو شاهد الشمعة المباشرة تتحدث.

SVG

سباق الأعمدة

عشرة أعمدة لا تغادر DOM مطلقًا. تحدد رتبتها translateY، فينقل الانتقال كل عمود إلى صفه كلما تغيرت القيم.

SVG

مخطط مساحات مكدّسة

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

SVG

خريطة شجرية

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

SVG

مدرّج تكراري مباشر

تتدفق عينات من أربعة توزيعات. تُعاد حسابات الفئات عند كل تغيير، ويتبع منحنى جرسي ملائم المتوسط، ويحدد شريط تمرير عدد الفئات.

SVG

لوحة رسم

ترسم أحداث المؤشر خطوطًا متعددة المقاطع. تعرض list() خطًا لكل ضربة رسم، وتطول الضربة الجارية عند كل update().

SVG

مقبض دوّار

شريط تمرير مخصص: تحدد زاوية المؤشر القيمة، وتغيّرها مفاتيح الأسهم تدريجيًا، ويحوّل pathLength="100" القيمة إلى شرطة على المسار.

SVG

عجلة الألوان

اختر درجة اللون بالزاوية والتشبّع بالمسافة. تتكون العجلة من تسعين قطاعًا وتدرّج شعاعي وقرص داكن.

SVG

سبيروغراف

تدور عجلة داخل حلقة ويتتبع قلم مسارها. يطيل كل إطار شرطة واحدة ويحدّث نطاق scope() الخاص به فقط.

SVG

كرات مرتدة

جاذبية وجدران وتصادمات ضمن حلقة requestAnimationFrame. اسحب إلى الخلف ثم أفلت لإطلاق كرة.

SVG

كتل لزجة

يمزج مرشح تمويه ومصفوفة ألوان الكتل معًا. يتبع أثر من الدوائر المؤشر.

SVG

رسم بياني بالقوى

تتنافر العقد وتتجاذب الروابط ويهدأ التخطيط تدريجيًا حتى يستقر. اسحب عقدة أو انقرها لإضافة عقدة فرعية.

SVG

تحديد وتكبير

حدّد نطاقًا بالسحب في النظرة العامة لتكبير المخطط أعلاه. يتبع clipPath التحديد لتلوين النطاق المختار.

SVG

إكس أو

العب ضد الحاسوب. تضيف when() كل علامة، ويرسمها تحريك CSS على شرطات مسارها.

SVG

نص دائري

اكتب نص الشارة. يثني textPath النص حول دائرة، وتضبط textLength طوله ليكمل دورة واحدة تمامًا.

SVG

التوجيه

جداول المسارات والمطابقة والمسار النشط والطبقات والمحمّلات. nuclo-router حزمة مستقلة: npm install nuclo nuclo-router.

تطبيق بمسارات

تطبيق فعلي بموجّه خاص يعمل داخل الإطار: جدول مسارات وoutlet() واحد وروابط عادية وحالة انتظار وصفحة 404. تنقّل ثم استخدم Back.

التوجيه+ nuclo-router

مسارات متداخلة

Docs تخطيط ذو مسارات فرعية. يُعرض الموضوع في outlet() الخاص به، وتُحل روابط ./topic نسبة إلى مسار التخطيط. اكتب ملاحظات ثم بدّل المواضيع: لا يُعاد بناء التخطيط.

التوجيه+ nuclo-router

محمّلات المسارات

تُصدّر صفحة المنشور load() تعمل قبل بناء الصفحة. راقب router.pending أثناء الانتظار، وحالة الخطأ مع Retry عند رمي استثناء في المنشور المعطوب.

التوجيه+ nuclo-router

الطبقات

يدفع نموذج الطلب صفحة العميل كطبقة وينتظر نتيجتها. لا يُعاد عرض النموذج، فتظل ملاحظاته محفوظة. ينهي Save عملية الدفع بنتيجة، ويلغيها Cancel أو Back.

التوجيه+ nuclo-router

موجّهات متعددة وتحميل

موجّهان ومؤشرا تحميل. لكل من تخطيط المتجر وقسمه load()، ويعملان بالتوازي ضمن router.pending واحد. للشريط الجانبي موجّهه الخاص، أُنشئ دون بدء تشغيله، وله مؤشر تحميل مستقل يُحدَّث من onNavigate.

التوجيه+ nuclo-router

مطابقة الأنماط

أنماط ثابتة و:param و*rest، وجدول قسم مركّب تحت مسارين أبويين. اكتب مسارًا وشاهد match() تحله دون تحميل أي شيء.

التوجيه+ nuclo-router

التطبيقات

برامج أكبر بملء الشاشة وكودها المصدري الفعلي في علامات تبويب: سطح مكتب بنوافذ وجدول بيانات ومحادثة وألعاب ومحررات ومكتبات تدير حالتها بنفسها.

اكتب مباشرة في الصفحة، واسحب المقابض لإعادة ترتيب الكتل أو نقلها إلى التخطيطات، واضغط / للإدراج، وانقر بالزر الأيمن للإجراءات. نسّق تخطيطات grid وflex، وتراجع عن التعديلات، وعاين بحجم الهاتف، وصدّر HTML.

التطبيقات

تنفيذ الخوارزمية خطوة بخطوة

المحرك JavaScript عادي: مولّدات تغيّر مصفوفة وتسلّم التحكم بعد كل خطوة. يستدعي المشغّل next() وupdate()؛ والأعمدة list() فوق الكائنات نفسها، لذا ينقل التبديل عنصرين.

التطبيقات

لوحة كانبان

لوحة فريق: أضف المهام وأسندها لأشخاص وعدّلها في حوار وصفِّها بالشخص أو البحث واسحبها بين الأعمدة وتراجع عن الحذف. الأعمدة والبطاقات مصفوفات عادية للكائنات نفسها؛ وكل نقل هو splice(). تُطابق الصفوف بالهوية، لذا يُعاد استخدام عنصر البطاقة عند سحبها أو ترتيبها أو إسنادها أو تعديلها. يثبت ذلك عدّاد التركيب على الشاشة.

التطبيقات

مستكشف three.js

مكتبة تدير حالتها بنفسها. تقرأ اللوحة المواضع والألوان والأعلام مباشرة من كائنات three.js وتكتب التعديلات إليها. تستدعي حلقة العرض update() مرة لكل إطار؛ ولا تُنشأ نسخة موازية للحالة.

التطبيقات

تمرير لانهائي

تدفق بلا نهاية: تنشئ fetch() وهمية وسريعة كل صفحة عند الطلب في مصفوفة عادية واحدة. لا توجد في DOM إلا الصفوف القريبة من نافذة العرض: تعرض list() الجزء posts.slice(start, end) بين فاصلين، فتبقى الصفحة خفيفة حتى مع مئة ألف منشور. يطلب عنصر مراقبة في النهاية الفعلية الصفحة التالية قبل دخوله حيز الرؤية.

التطبيقات

سطح المكتب

سطح مكتب عامل يتضمن الملفات والملاحظات والطرفية والآلة الحاسبة والمؤقت ولوحة كانبان والتطبيق المالي والتقويم. أنشئ المجلدات ونظّمها وعدّل الملاحظات واستخدم أوامر shell على قرص محاكى مشترك محفوظ في المتصفح. اكتب في الحاسبة بلوحة المفاتيح، وانقر أي موضع في الطرفية لتركيز سطر الإدخال، واسحب البطاقات بين الأعمدة، أو سجّل حساباتك في الجدول المالي وشاهد المخططات تتغير؛ يُحفظ السجل في IndexedDB. تحتفظ النوافذ بحالتها عند النقل والتحجيم والتبديل بين التطبيقات؛ ويملأ المؤقت الجاري علبة شريط المهام باستخدام into().

التطبيقات

رسم بياني للعقد

صِل الأعداد والنصوص والمفاتيح بعقد العمليات الحسابية والمقارنات وIf، فتُحدَّث كل قيمة أثناء الكتابة. الدوال رسوم بيانية أيضًا: عقدتا Input وOutput هما منافذ كل Call، ويمكن لـ Call تسمية دالتها نفسها، فتستخدم factorial وsum الاستدعاء الذاتي مع If للخروج. المحرك JavaScript عادي: كل عقدة مولّد يسلّم التحكم لطلب مدخل، وتقودها حلقة واحدة بمكدسها الخاص؛ لذا يداخل sum(50000) خمسين ألف استدعاء في نحو عُشر ثانية دون لمس مكدس استدعاءات JavaScript. لا يوقف الاستدعاء الذاتي بلا مخرج إلا حدّ الخطوات. يكتب السحب x وy ويحدّث نطاق لوحة الرسم فقط؛ ويبيّن عدّاد التنفيذ أن نقل العقد لا يشغّل الرسم البياني.

التطبيقات

جدول بيانات تفاعلي

جدول عمل فوق 10,000 كائن صف عادي. البحث والتصفية والترتيب وتقسيم الصفحات دوال عادية على المصفوفة، ومتن الجدول list() للصفحة الحالية. تُطابق الصفوف بالهوية، فينقل الترتيب الصفوف الباقية في الصفحة، ويظل الصف المعدّل الكائن نفسه في كل مكان. يثبت ذلك عدّاد الصفوف المبنية.

التطبيقات

محادثة

محادثة بثلاث قنوات، كل منها كائن عادي يضم السجل والمؤشر وحالة الكتابة والمسودة وموضع التمرير. يحفظ التبديل كل قناة كما كانت، ولا يحدّث update("chat-sidebar") إلا شارات غير المقروء. يُحمَّل السجل إلى أعلى بلا نهاية باستخدام unshift() وscrollTop تزداد بمقدار الارتفاع المضاف. تظهر رسالتك قبل وصولها إلى الخادم، وتعدّل send() الكائن نفسه؛ ولا تعيد Retry أو Edit أو Delete أو التفاعلات بناء صفه. تدعم الرسائل الكود والنص العريض والروابط وإشارات @.

التطبيقات

لوحة معلومات مباشرة

بطاقات تُحدَّث بمعدلات مختلفة، من عشرين مرة في الثانية إلى مرة واحدة. كل بطاقة scope()، ويستدعي مؤقتها update() بمعرّفها، فلا تعيد النبضة حساب غيرها. تُحصى مرات حساب كل قيمة ديناميكية على الشاشة: انتقل إلى update() عام فتُحسب الساعة نحو مئة مرة في الثانية لتتغير مرة واحدة.

التطبيقات

محرر البكسل

الصورة مصفوفة عادية واحدة من 1024 سلسلة لونية، وتقرأ كل خلية لونها منها. تكتب ضربة الرسم في المصفوفة وتستدعي update()؛ وعند انتهائها يحتفظ المحرر بنسخة عبر slice(). يعيد التراجع والإعادة وكل عنصر في list() السجل مصفوفة أقدم: بلا مخزن حالة أو بيانات غير قابلة للتغيير.

التطبيقات

الثعبان

حلقة اللعبة مؤقت يستدعي step() على كائنات عادية ثم update() مرة لكل نبضة. الثعبان list() لكائنات خلاياه، ويصبح كائن الذيل الرأس الجديد كل نبضة، فيتحرك عنصر واحد دون بناء عناصر جديدة؛ ولا يزيد عدّاد الأجزاء المبنية إلا عندما يأكل الثعبان. يظهر الطعام بتحريك keyframes().

التطبيقات

متتابع الخطوات

مكتبة تدير توقيتها بنفسها. يحجز Web Audio كل نغمة مسبقًا على خطه الزمني، والنمط مصفوفة منطقية عادية ثنائية الأبعاد تبدّلها الشبكة ويقرأها المجدول؛ فتُسمع النقرة في المرور التالي. لا يحدّث مؤشر التشغيل إلا نطاق scope() الخاص به عند تغير الخطوة المسموعة. يبدأ الصوت عند أول Play ويُغلق في تنظيف التركيب، فيتوقف عند مغادرة المثال.

التطبيقات

مبدّل اللغة

كل تسمية قيمة ثابتة مكتوبة كما في تطبيق أحادي اللغة، فلا تعيد update() قراءتها: نقرات السلة تحدّث الكميات والإجماليات فقط. يستدعي تبديل اللغة forceUpdate() على هذه الشجرة، فتعمل الدالة مجددًا وتُعدّل العناصر نفسها، بما فيها lang وdir. تأتي العملات وصيغ الجمع والتواريخ والقوائم من Intl، وتبقى السلة والقسيمة المدخلة بعد التبديل.

التطبيقات

محرر السمة

مكتبة مكوّنات صغيرة: تسمّي createCss() الرموز، وتبني variants() منها الأزرار والشارات والبطاقات وحقول الإدخال والتنبيهات ومفاتيح التبديل. الرموز متغيرات CSS، لذا يُنشأ كل صنف مرة واحدة. يغيّر كل عنصر تحكم كائن سمة عاديًا ويستدعي update()، فتُعاد كتابة نص عنصر style واحد.

التطبيقات

أمثلة عملية. عروض مباشرة.

الأساسيات

عدّاد

قائمة المهام

مرشح البحث

التنسيق

المكوّنات

معلمات ثابتة وديناميكية

العناصر الفرعية والمعدّلات

هوية عناصر القائمة

بيانات متداخلة

API

بُناة الوسوم

المكوّنات

السمات

الأحداث

دورة الحياة

تحديثات صريحة

القيم الديناميكية

update()

scope()

when()

list()

region() وinto()

forceUpdate()

التنسيق

css()

cx()

createCss()

النماذج

التحقق من الحقول

معالج متعدد الخطوات

صفوف ديناميكية

SVG

مخطط أعمدة

مخطط خطي

مخطط حلقي

تحريك SVG

مقياس

مخطط راداري

خريطة حرارية

تلميح عند التحويم

محرر المنحنيات

ساعة

أيقونات متبدلة

تدفق مباشر

مخطط شموع

سباق الأعمدة

مخطط مساحات مكدّسة

خريطة شجرية

مدرّج تكراري مباشر

لوحة رسم

مقبض دوّار

عجلة الألوان

سبيروغراف

كرات مرتدة

كتل لزجة

رسم بياني بالقوى

تحديد وتكبير

إكس أو

نص دائري

التوجيه

تطبيق بمسارات

مسارات متداخلة

محمّلات المسارات

الطبقات

موجّهات متعددة وتحميل

مطابقة الأنماط

التطبيقات

باني الصفحات

تنفيذ الخوارزمية خطوة بخطوة

لوحة كانبان

مستكشف three.js

تمرير لانهائي

سطح المكتب

رسم بياني للعقد

جدول بيانات تفاعلي

محادثة

لوحة معلومات مباشرة

محرر البكسل