times components

مكتبة مكون التايمز

غاية

موطن مكونات react .

بيئة ديف

نطلب MacOS مع node.js (للحصول على إصدار محدد ، يرجى التحقق

يمكنك المحاولة بدون هذه المتطلبات ، لكنك ستكون بمفردك.

عرض مكوناتنا

انتقل إلى http://components.thetimes.co.uk

ابدء

1. تشغيل yarn install

2. يمكن رؤية المكونات تعمل في كتاب قصص

• قصص
  1. yarn storybook
  2. انتقل إلى http: // localhost: 9001

مخطط

انظر حزمة Utils حول كيفية تحديث المخطط.

تصحيح الأخطاء

يمكن تصحيح المكونات في هذا المشروع من خلال أدوات مطور المستعرض الخاص بك. تفترض هذه الخطوات استخدام DevTools Chrome.

لتصحيح كتاب القصة على الويب لدينا:

1. yarn storybook
2. انتقل إلى http: // localhost: 9001
3. مفتوحة devtools
4. انقر فوق المصادر
5. في علامة التبويب الشبكة أسفل الجزء الأيسر ، قم بتوسيع TOP => Storybook-Preview-IFRAME => WebPack: // => . => الحزم

يمكن تصحيح أي من ملفات المصدر هذه مباشرة.

ربطات أوقات الارتباط لمشروع العرض

اتبع هذه الخطوات هنا

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

انظر التغييرات الخاصة بك في عرض ملفات RNW.JS

إلى جانب ربط مكونات التايمز وتقديم إعادة التجميع معًا ، يمكنك عرض التغييرات التي تم إجراؤها على مكونات الأوقات في تقديم ملفات RNW.JS.

1. في مكونات الأوقات ، بعد إجراء تغييراتك ، قم بتشغيل yarn bundle في الحزمة التي كنت تعمل فيها. إذا كنت تعمل في حزمة ts-components فستحتاج إلى تشغيل yarn build أولاً ثم yarn bundle .
2. يقوم تشغيل الأمر بإنشاء ملف RNW.JS في جذر المجلد. تحقق من الملف لمعرفة ما إذا كانت التغييرات قد حدثت.
3. انسخ محتويات ملف rnw.js وقم بصقها في الملف ذي الصلة في Render's node_modules . على سبيل المثال ، إذا قمت بتجميع ملف rnw.js في حزمة article-skeleton في مكونات الأوقات ، فستملق المحتويات في node_modules/@times-components/article-skeleton/rnw.js .
4. قم بتشغيل العرض ويجب أن ترى التغييرات الخاصة بك.

تصحيح الاختبارات

تستخدم الاختبارات حاليًا Jest لتشغيلها ، لذا إذا كنت ترغب في تصحيح أي اختبار اتبع هذه الخطوات:

1. (ابحث عن أمر الاختبار الخاص بك) jest --config="./packages/provider/__tests__/jest.config.js" . اعتمادًا على الدليل الذي نبدأ الاختبارات منه ، قد يختلف دليل --config . دليل currenct الخاص بي هو في جذر الريبو: times-components .

2. راجع أمر الاختبار الخاص بك من package.json للحصول على الحزمة المحددة التي تريد التحقق منها.

ملاحظة: إذا لم يكن لديك Jest تثبيت عالميًا ، فيمكنك استخدامه محليًا من node_modules/.bin/jest

3. (ابدأ اختبارات في وضع التصحيح) ، نحتاج إلى بدء نفس الأمر ولكن من خلال العقدة أثناء وجوده في وضع التصحيح مثل SO: node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

ملاحظة: --runInBand هو علامة jest التي تدير جميع الاختبارات بشكل متسلسل في العملية الحالية. إذا لم نضيف هذه العلامة ، فإن عملية العقدة التي بدأت jest فقط ستكون قابلة للتصحيح.

4. (إضافة عبارات تصحيح) Normaly ، سنضيف نقاط توقف ، ولكن عندما لا يكون ذلك ممكنًا دائمًا ، لأن الملفات التي نحتاج إلى وضع نقاط التوقف عليها لم يتم تحميلها بعد بواسطة jest . لذلك لجعل مصحح الأخطاء يتوقف عن المكان الذي نريده ، نحتاج إلى إضافة debugger; العبارات بدلاً من نقاط التوقف في الكود وإعادة ترجمة إذا لزم الأمر.

5. (إرفاق مقبس الويب) بمجرد أن نبدأ الاختبارات في وضع التصحيح ، نحتاج إلى إرفاقه:

• (موصى به) استخدم تصحيح الكروم عن بُعد للعقدة:

  1. فتح chrome://inspect في شريط عناوين الكروم
  2. Open dedicated DevTools for Node
  3. إذا كنت قد بدأت الاختبارات مع الأمر المذكور أعلاه ، فيجب أن تتصل تلقائيًا ، ولكن إذا لم يذهب إلى علامة تبويب Connection في النافذة المنبثقة وإضافة اتصال localhost:9229 أو أيا كان منفذك
  4. يجب أن يتوقف مصحح الأخطاء على السطر الأول بسبب علم- --inspect-brk وبمجرد الضغط على زر التشغيل (تنفيذ الاستئناف) ، يجب أن يتوقف عن debugger; إفادة

  ملاحظة: بمجرد توقفك ، قد ترى أن كل الكود الخاص بك يتم تجميعه في سطر واحد. هناك حل سهل لذلك: في الجزء السفلي من نافذة التصحيح بالقرب من Line: 1 Column: 1 تسميات يجب أن ترى زر {} الذي سيقوم بتجميع الكود الخاص بك وستظل قادرًا على التصحيح بشكل صحيح.

• (استخدم VSCode) يجب أن ينظر التكوين بالقرب من هذا:

 ...
    "configurations" : [
      {
          "localRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "remoteRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "type" : " node " ,
          "request" : " attach " ,
          "name" : " Attach to Server on 9229 " ,
          "address" : " 127.0.0.1 " ,
          "port" : 9229
      }
  ]

المساهمة

انظر المساهمة.

سوف yarn commit بملفات (مثل git commit ) ، وسوف يساعد المساهم في إضافة رسالة ملزمة مناسبة مضمنة مع Changelog التقليدية