تنزيل torus - تنزيل رمز المصدر torus

torus

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

Minor rendering bug fixes

تنزيل

توروس ( `torus-dom` )

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

يمكنك أن تجد؟ الوثائق الكاملة لـ Torus هنا ، على صفحات GitHub .

لدى Torus أيضًا نسخة مشروحة وسهلة القراءة من قاعدة كود (موجزة جدًا) بأكملها ، وأيضًا على صفحات GitHub. تحقق من ذلك إذا كنت تريد معرفة المزيد حول كيفية تصميم الأطر ، وكيف يعمل DOM و Templating الافتراضي!

إليك ما يبدو عليه Torus في العمل! هذا هو تطبيق عداد يعمل بكامل طاقته ، لا يوجد تجميع أو خطوات تجميع مطلوبة.

إسقاط علامة البرنامج النصي هذه في HTML الخاص بك

 < script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >

... وتحميل هذا البرنامج النصي.

 // every view extends Component or StyledComponent
class App extends Torus . StyledComponent {

    init ( ) {
        // initialize our local state
        this . count = 0 ;
    }

    styles ( ) {
        // we can define dynamically and efficiently injected
        //  styles for our component with styles(), like this.
        //  These styles are also automatically scoped to the
        //  component, and we can use the full, nested SCSS syntax.
        return css `
        font-family: system-ui, sans-serif;
        h1 {
            text-align: center;
        }
        button {
            padding: 4px 8px;
            &:hover {
                opacity: .8;
            }
        }
        ` ;
    }

    compose ( ) {
        // We define the structure of our component in compose(),
        //  using a JSX- and lit-html-like syntax as a template string.
        return jdom `<main>
            <h1>Hi! You clicked ${ this . count } times.</h1>
            <button onclick=" ${ ( ) => {
                this . count ++ ;
                this . render ( ) ;
            } } ">Count up!</button>
        </main>` ;
    }

}

// mount the app to the page
document . body . appendChild ( new App ( ) . node ) ;

سمات

؟ صغير دون حلول الوسط

لا يوجد لدى Torus أي تبعيات للإنتاج ، ولا يتطلب أي خطوة بناء للاستفادة من جميع ميزاتها ، وتزن أقل من 5 كيلو بايت Gzipped بما في ذلك محرك templating ، العارض ، المكون والنظام الأحداث ، و css-in-js. هذا يجعل من السهل تبني والشحن ، لأي شيء من تقديم مكون واحد على الصفحة إلى إنشاء تطبيقات واسعة النطاق.

؟ ‍ سريع وسريع الاستجابة افتراضيا

Torus غير مصمم ليكون أسرع مكتبة DOM افتراضية (هناك بدائل رائعة مثل inferno ) ، ولكن الأداء والاستجابة من بين الأهداف الأساسية للمشروع. بينما تبقى صغيرة ، يحاول Torus أن يكون سريعًا وسريع الاستجابة قدر الإمكان ، وخاصة في التقديم. إلى جانب حجم الحزمة الصغيرة ، فإن هذا يجعل Torus رائعًا لبناء تطبيقات الويب لأي مكان ، على أي جهاز.

محمول عبر نظام الويب

تقوم بنية Torus بتغليف جميع المنطق والتحديث داخل المكون نفسه ، لذلك من الآمن أخذ Component#node ومعاملته كمؤشر بسيط لعنصر DOM الجذر للمكون. يمكنك تحريكها حول الصفحة ، أو خذها داخل وخارج المستند ، أو تضمينها في مكونات React أو VUE أو حتى مكونات الويب ، وأيضًا ، وأيضًا يمكن استخدام عنصر DOM التقليدي. يتيح لك ذلك تضمين مكونات وتطبيقات Torus في مجموعة متنوعة من بنيات الواجهة الأمامية.

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

؟ التدويل والتوسيع

لا يهتم Torus بالتدويل ، ولكن كمطورين ، يمكننا استخدام واجهات برمجة التطبيقات المتاحة لنا جعل التدويل ممكنًا داخل مكونات Torus الخاصة بنا. يعرض Torus الكثير من عملية التقديم و DOM الافتراضية لك ، والمطور ، والأهم من ذلك يسمح لنا بإنشاء preprocessor يمكنه أن يأخذ في JDOM ، وتعديله قبل أن يصل إلى العارض ، حتى نتمكن من إجراء تعديلات على DOM التي يرى العارض مع الكود الخاص بنا. هذا يجعل Torus قابلاً للتوسعة ومثالية لـ i18n. في الواقع ، فإن API قبل المعالج هو ما يجعل مكونات Torus Styled() ممكنة. ( Styled() يضيف اسم فئة جديد إلى JDOM قبل تقديم المكون.)

على سبيل المثال ، قد نقوم بعمل مكون I18nComponent ، والذي يمكن أن يكون بمثابة فئة مكونة أساسية لمشروع دولي ، مثل هذا.

 class I18nComponent extends Component {

    // The default preprocess method just returns the jdom as-is. We can override it
    //  to modify the JDOM given by component's `#compose()` method before it reaches the
    //  virtual DOM renderer.
    preprocess ( jdom , _data ) {
        // Here, we might recursively traverse the JDOM tree of children
        //  and call some custom `translate()` function on each string child
        //  and any displayed props like `placeholder` and `title`.
        //  As a trivial example, if we only cared about text nodes on the page,
        //  we could write...
        const translate = jdom => {
            if ( typeof jdom === 'string' ) {
                // translate text nodes
                return yourImplementationOfTranslateString ( jdom ) ;
            } else if ( Array . isArray ( jdom . children ) ) {
                // it's an object-form JDOM, so recursively translate children
                jdom . children = jdom . children . map ( yourImplementationOfTranslateString ) ;
                return jdom ;
            }
            return jdom ;
        }

        // In production, we'd also want to translate some user-visible properties,
        //  so we may also detect and translate attrs like `title` and `placeholder`.
        return translate ( jdom ) ;
    }

}

أمثلة

أنا (Linus) استخدم Torus لمعظم مشاريعي الشخصية عندما أحتاج إلى مكتبة واجهة المستخدم من جانب العميل. بعض هذه المشاريع تشمل:

CodeFrame ، محرر رمز عبر الإنترنت
ميرا ، تطبيق جهات الاتصال
unim.press ، قارئ Reddit على غرار الصحف
حاسبة الرسوم البيانية
قارئ أخبار المتسللين
1989.style ، اختبار عن أغاني تايلور سويفت
الأصوات من الأماكن

التأثيرات

API's Torus هي مزيج من الواجهات التعريفية لتحديد واجهات المستخدم ووجهات النظر ، والأنماط الضرورية لإدارة الدولة ، والتي أجدها شخصياً هي أفضل توازن بين الأسلوبين عند بناء تطبيقات كبيرة. كممارسة عامة ، يجب أن تحاول المكونات أن تظل التصريحي والمعادلة ، والتفاعل مع نماذج البيانات / الحالة عبر واجهات برمجة التطبيقات العامة الضرورية المستقرة التي تعرضها نماذج البيانات.

تصميم Torus مستوحى من الهندسة المعمارية التي تعتمد على مكونات React ، ويقترض المفاهيم الشائعة من النظام الإيكولوجي React ، مثل فكرة الانتشار في DOM الظاهري قبل تقديم ، والتكوين بمكونات ترتيب أعلى ، وخلط CSS و Markup في JavaScript لفصل كل مكونات في فئة واحدة. لكن Torus يعتمد على تلك الأفكار من خلال توفير واجهات برمجة تطبيقات أقل من مستوى أقل وأقل رأيًا ، واختيار نموذج بيانات مفيد بدلاً من طبقة عرض/وحدة تحكم تسعى إلى أن تكون وظيفية بحتة.

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

أخيرًا ، استلهمت علامة Torus's jdom Template من HTM و LIT-HTML ، وكلاهما من العلامات على معالجة علامة HTML في DOM الظاهري.

وقت التشغيل على التجميع

كانت أدوات تطوير الواجهة في اتجاه الاتجاه في اتجاه القيام بالمزيد والمزيد في وقت البناء / وقت الترجمة ، مما يجعل بناء الجملة والميزات الأكثر ثراءً ، مثل اعتماد ميزات JavaScript للاقتراح و JSX. يعد Svelte مثالًا رائعًا على كيفية قيام أدوات وقت الترجمة بإنشاء طريقة اختلاف بشكل قاطع في التفكير في بناء واجهات المستخدم.

لا يحاول Torus أن يكون أداة وقت بناء أخرى. يتمثل أحد أهداف Torus في أن يكون مفيدًا قدر الإمكان في وقت التشغيل مع التضحية بقدر القليل من الأداء والنفقات العامة ، حتى نتمكن من التخلص من خطوة التجميع في التطوير. نتيجةً لذلك ، فإن Torus هي التجربة القياسية الذهبية لأفكار واجهة المستخدمين النماذج الأولية: ما عليك سوى إسقاط علامة <script> في المستند وابدأ الكتابة. الجانب السلبي لهذه الأولوية الواعية لوقت التشغيل عبر وقت الترجمة هو أن بعض الميزات التي ليست جزءًا من بناء جملة JavaScript ليست ممكنة بدون خطوة ترجمة. والجدير بالذكر أن بناء جملة Decorator ECMASCRIPT وبناء جملة JSX غير ممكنان ، ولكن سيكون مفيدًا ، لو كانت هناك خطوة تجميع في بناء تطبيقات Torus. يمكننا كتابة قوالب JDOM في JSX ، والتي تشبه إلى حد كبير ، ولف أساليب تحديث الحالة ومستمعي الأحداث في @render و @bind Decorators بدلاً من استدعاء this.render() و .bind(this) في كل حالة.

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

ملاحظة على الشظايا

أدخلت أطر واجهة المستخدم التعريفية المماثلة مثل React و PEACT فكرة الشظايا ، والتي هي Syntax Sugar لجعل مجموعة من العقد DOM (الظاهرية) من وظيفة. هذا لأنه على الرغم من أن وجود مكون يعيد مجموعة من العقد لا معنى له من تلقاء نفسه ، فمن المفيد في كثير من الأحيان أن يكون لديك وظائف داخلية تعيد أجزاء من المكونات ووجهات النظر كعقد بدون عنصر غلاف. يدعم Torus أصليًا تمثيل صفيف لقائمة من العقد - فقط لف كائنات JDOM في صفيف! على الرغم من أنه ، على عكس React ، لا يمكن للمكون تقديم أكثر من عقدة واحدة ، إلا أن معظم حالات استخدام الشظايا مغطاة ببساطة بتمرير تمثيل قائمة من العقد في صفيف داخلي داخل مكون ، وهذا مدعوم بشكل حدسي خارج الصندوق في Torus.

لقد لعبت مع فكرة تعديل علامة قالب jdom لتتمكن من تحويل تمثيلات القالب لشظايا مثل <>...</> في صفائف من العقد. jdom قادر أيضًا على تحليل العناصر العلوية المجاورة في القالب وإعادتها في صفيف واحد. ومع ذلك ، قررت عدم شحن هذه الميزات في الوقت الحالي ، لأنني أعتقد أن حالات الاستخدام هذه مغطاة بشكل كاف من خلال القدرة على إعادة .children قالب JDOM ، حتى ربما واحدة ملفوفة داخل علامات الشظية <>...</> لقابلية القراءة ، أو مجرد إرجاع مجموعة من كائنات JDOM. إنني أقدر صفة الخطوة الإضافية التي تنطوي عليها إعادة صفيف غير تقليدي من عملية تقديم ، وأعتقد أن التكلفة العرضية للصفائف العائدة كتمثيلات وسيطة لأجزاء من العرض لا تستحق تكلفة الميزة الإضافية.

التوافق

يستخدم Torus الرموز والخرائط والمجموعات ، لذلك يتوافق مع أحدث الإصدارات من جميع المتصفحات الرئيسية باستثناء Internet Explorer 11. في المتصفحات القديمة التي لا تدعم مشغلي انتشار الصفيف على سبيل المثال ، قد تحتاج إلى نقل المكتبة إلى ES5 باستخدام أداة مثل بابل.

التثبيت والاستخدام

يمكنك تثبيت Torus من NPM مثل torus-dom . لا يزال Torus يعتبر تجريبيًا ، وليس لإصدار 1.0 حتى الآن. أعتقد أن واجهة برمجة التطبيقات مستقرة الآن وقد تم سحق معظم الأخطاء الرئيسية ، ولكن لا توجد ضمانات حتى 1.0.

npm install --save torus-dom
# or
yarn add torus-dom

 import { StyledComponent , Record , Store , Router } from 'torus-dom' ;

بدلاً من ذلك ، يمكنك أيضًا استيراد Torus مع:

 < script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >

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

المساهمة

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

يبني

يمكنك استخدام كل من NPM والغزل لتطوير Torus ، ولكن البرامج النصية NPM تستخدم الغزل ، ويتم دعم الغزل رسميًا لأنه ما أستخدمه لتطوير وبناء Torus.

لبناء Torus من المصدر ، قم بالتشغيل

yarn build

سيتم تشغيل هذا ./src/torus.js من خلال مجموعة أدوات مخصصة ، وإزالة أي مكالمات وظائف تصحيح الأخطاء أولاً وتشغيل هذه النتيجة من خلال WebPack ، من خلال أوضاع development production . يتم حفظ كلا المخرجين ، وكذلك إصدار الفانيليا من Torus بدون معالجة WebPack ، إلى ./dist/ . سيقوم تشغيل yarn clean بحذف أي قطعة أثرية من هذا القبيل ، وكذلك أي تقارير تغطية تم إنشاؤها.

توليد وثائق من التعليقات

لدى Torus نظام فريد لإنشاء وثائق من تعليقات التعليمات البرمجية التي تبدأ بـ //> . لإنشاء مستندات التعليق ، قم بتشغيل

yarn docs

سيتم إنشاء ملفات المستندات على ./docs/ ويمكن عرضها على متصفح الويب. تحقق من صفحة github لهذا المشروع للحصول على مثال على ما ينشئه هذا البرنامج النصي.

إجراء اختبارات

لتشغيل اختبارات وحدة Torus وإنشاء تقرير تغطية coverage/ ، تشغيل

yarn test

سيؤدي ذلك إلى تشغيل جناح الاختبار الأساسي على بناء تطوير Torus. اختبارات التكامل الأكثر شمولاً باستخدام واجهات المستخدم الكاملة مثل تطبيقات TODO موجودة على خريطة الطريق.

يمكننا أيضًا إجراء اختبارات على بناء الإنتاج ، مع: