تنزيل wui_builder - تنزيل رمز المصدر wui

wui_builder

مكونات الطرف الثالث

0.3.0

تنزيل

مكتبة دارت لبناء واجهات المستخدم للويب ، مستوحاة من ReactJS

لبناء واجهات مستخدم الويب المعنية بالمكونات في DART.

يوفر مكتبة غنية من العناصر الافتراضية المكتوبة لـ SVG & Standard HTML.

يدعم تحديد المكونات المخصصة مع واجهة مماثلة للتفاعل. يتم دعم جميع أساليب دورة الحياة نفسها.

بنيت مع عدم التزامن عرض في الاعتبار منذ البداية.

متوافق تمامًا مع DART 2 ، الوضع القوي ، و DDC.

الوثائق والأمثلة

تحقق من الوثائق على صفحات Github لإلقاء نظرة بعمق على الإطار

ما الذي يجعل إطار دوم الافتراضي هذا مختلفًا؟

إنه مكتوب في دارت. زائد:

عناصر DOM الافتراضية التي تم إنشاؤها

المولد هو الميزة الأكثر فريدة من WUI_BUILDER. يقوم المولد بإنشاء منشئ عنصر DOM الظاهري لكل نوع عنصر محدد في حزم DART HTML و SVG. يوفر كل منشئ عنصر DOM Virtual DOM نفس المقبلات المكتوبة مثل عنصر HTML/SVG المقابل. هذا يجعل من السهل كتابة المكونات المرنة.

جدولة التحديث القابلة للتكوين

بعد ذلك ، يدعم Wui_Builder التقديم التكراري لتجنب حظر الخيط الرئيسي في التحديثات الكبيرة. التحديثات التكرارية عمليات فقط على عوائد عروض الخمول ، مما يعني أنه سيتم تقسيم مهمة التقديم والتخطيط عبر إطارات متعددة. يمنح WUI_BUILDER الطاقة للمطور لتحديد متى يجب تقديم المكونات. يتيح للمطور أن يقرر ما إذا كان هناك تحديثات مكون بشكل متزامن أو على إطار الرسوم المتحركة أو رد الاتصال على الخمول. من الناحية المثالية ، فإن المكون إما:

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

ومع ذلك ، يُسمح أيضًا بالتحديثات المتزامنة بالطلب عند الطلب ، دون انتظار إطار الرسوم المتحركة أو رد الاتصال الخمول.

تحديث ذكي

أخيرًا ، يمنع WUI_BUILDER تحديثات غير ضرورية عندما يتم وضع تحديثات متعددة إلى نفس المكون قبل أن تتمكن من المعالجة. على سبيل المثال ، قل أن لدي مكونًا يتم تحديثه على إطار الرسوم المتحركة باستخدام setStateOnAnimationFrame. إذا تم استدعاء SetStateOnAnimationFrame مرتين بين الإطارات ، فلن يتم تشغيل عملية التحديث إلا مرة واحدة مع السماح بتنفيذ وظائف STETTER للدولة.

ملاحظة ، لا يتم دعم requestIdLecallback حاليًا بواسطة جميع المتصفحات ولا يتضمن WUI_Builder polyfill في هذا الوقت. لا يزال العرض المتزامن يعمل على جميع المتصفحات. انظر مخطط التوافق هنا.

بناء الجملة

 class HelloWorldProps {
    final String text;
    HelloWorldProps ( this .text);
}

class HelloWorld extends PComponent < HelloWorldProps > {
    HelloWorld ( String text) : super ( HelloWorldProps (text));

    @override
    VNode render () => VDivElement ()
        ..text = props.text;
}

// instantiate the component, pass it an instance of HelloWorldProps
final component = HelloWorld ( 'Hello world' );

// render the virtual element into a container
render (component, querySelector ( '#container' ));