تنزيل addons frontend - تنزيل كود المصدر addons frontend

addons frontend

شفرة المصدر الأخرى

blog-utils-0.25.0

تنزيل

الإضافات الواجهة الأمامية

البنية التحتية للواجهة الأمامية والتعليمات البرمجية لاستكمال خادم mozilla/addons.

تقارير الأخطاء الأمنية

يتم تضمين هذا الرمز وموقع الإنتاج المرتبط به في برنامج مكافآت الأخطاء على الويب والخدمات الخاص بـ Mozilla. إذا وجدت ثغرة أمنية، فيرجى إرسالها عبر العملية الموضحة في صفحات البرنامج والأسئلة الشائعة. تتوفر المزيد من التفاصيل الفنية حول هذا التطبيق من صفحة Bug Bounty Onramp.

يرجى إرسال جميع الأخطاء المتعلقة بالأمان من خلال Bugzilla باستخدام نموذج الأخطاء الأمنية للويب.

لا تقم مطلقًا بإرسال الأخطاء المتعلقة بالأمان من خلال مشكلة Github أو عبر البريد الإلكتروني.

متطلبات

أنت بحاجة إلى إصدار Node LTS (الدعم طويل المدى).
قم بتثبيت الغزل لإدارة التبعيات وتشغيل البرامج النصية.

أسهل طريقة لإدارة إصدارات العقد المتعددة قيد التطوير هي استخدام nvm.

ابدأ

إذا كنت تستخدم نظام التشغيل Windows، فيرجى التأكد من اتباع إرشادات Windows أيضًا.

اكتب yarn لتثبيت كافة التبعيات
اكتب yarn amo:stage لبدء خادم محلي يتصل بخادم مرحلي مستضاف

أوامر التطوير

فيما يلي بعض الأوامر التي يمكنك تشغيلها:

يأمر	وصف
غزل عمو: أولمبيا	ابدأ تشغيل خادم/وكيل التطوير (من أجل amo) باستخدام البيانات من بيئة خادم الوظائف الإضافية المحلية.
غزل عمو:ديف	ابدأ تشغيل خادم/وكيل dev (لـ amo) باستخدام البيانات من خادم dev (https://addons-dev.allizom.org/)
غزل عمو:dev-https	مثل `amo:dev` ولكن مع HTTPS، وهو متاح على: https://example.com:3000/. اقرأ عن إعداد هذه البيئة
عمو الغزل: المرحلة	ابدأ تشغيل خادم/وكيل التطوير (من أجل amo) باستخدام البيانات من الخادم المرحلي (https://addons.allizom.org/)
بناء الغزل	قم ببناء التطبيق.
بناء الغزل-ci	قم بتشغيل البرامج النصية `build` و `bundlewatch` npm.
ساعة الغزل	قم بتشغيل Bundlewatch للتحقق من أحجام حزمة AMO التي تم إنشاؤها. مطلوب بناء AMO أولاً.
تدفق الغزل	تشغيل التدفق. بشكل افتراضي، يقوم هذا بالتحقق من الأخطاء والخروج
تدفق الغزل: تحقق	تحقق بوضوح من أخطاء التدفق ثم قم بالخروج
تدفق الغزل: ديف	التحقق باستمرار من أخطاء التدفق
إسلينت الغزل	لينت شبيبة
الغزل بدء-وظيفة-خادم الاختبار	قم بتشغيل حاوية Docker للاختبارات الوظيفية
نمط الغزل	لينت SCSS
الوبر الغزل	قم بتشغيل جميع وحدات JS + SCSS
الغزل أجمل	قم بتشغيل Prettier لتنسيق قاعدة التعليمات البرمجية بأكملها تلقائيًا
الغزل أجمل ديف	قم بتشغيل [Pretty-Quick] [] لمقارنة الملفات المصدر المعدلة وتنسيقها تلقائيًا مقابل الفرع الرئيسي
الغزل أجمل-CI	قم بتشغيل Prettier وتفشل إذا تم تغيير بعض التعليمات البرمجية دون تنسيقها
فحص إصدار الغزل	تحقق من أن لديك التبعيات المطلوبة
اختبار الغزل	تشغيل جميع الاختبارات (يدخل jest في وضع `--watch` )
اختبار الغزل التصحيح	قم بإجراء جميع الاختبارات مع إخراج وحدة التحكم الكاملة ورسائل الخطأ الكاملة (إدخال jest في وضع `--watch` )
تغطية اختبار الغزل	قم بإجراء جميع الاختبارات وإنشاء تقرير تغطية التعليمات البرمجية (أدخل jest في وضع `--watch` )
اختبار تغطية الغزل مرة واحدة	قم بإجراء جميع الاختبارات، وقم بإنشاء تقرير تغطية الكود، ثم قم بالخروج
اختبار الغزل مرة واحدة	قم بإجراء جميع الاختبارات، وقم بتشغيل جميع وحدات JS + SCSS، ثم اخرج
اختبار الغزل-ci	قم بتشغيل كافة اختبارات التكامل المستمر. هذا مخصص للتشغيل على CI فقط.

تشغيل الاختبارات

يمكنك الدخول إلى وضع الدعابة التفاعلي عن طريق كتابة yarn test أو yarn test-debug . هذه هي أسهل طريقة لتطوير ميزات جديدة.

إليك بعض النصائح:

سوف يخفي yarn test معظم مخرجات وحدة التحكم ورسائل فشل الاختبار التفصيلية، لذا فمن الأفضل أن تقوم بتشغيل مجموعة كاملة من الاختبارات. عند العمل على اختبار فردي، من المحتمل أنك تريد تشغيل yarn test-debug .
عند بدء yarn test ، يمكنك التبديل إلى محرر التعليمات البرمجية الخاص بك والبدء في إضافة ملفات اختبار أو تغيير التعليمات البرمجية الموجودة. أثناء قيامك بحفظ كل ملف، سيقوم jest بإجراء الاختبارات المتعلقة بالرمز الذي قمت بتغييره فقط.
إذا كنت قد a عندما بدأت لأول مرة، فسيستمر jest في تشغيل المجموعة الكاملة حتى عند تغيير ملفات معينة. اكتب o للتبديل مرة أخرى إلى وضع إجراء الاختبارات المتعلقة بالملفات التي تقوم بتغييرها فقط.
في بعض الأحيان يكون إجراء الاختبارات المتعلقة بتغييرات ملفك بطيئًا. في هذه الحالات، يمكنك كتابة p أو t لتصفية الاختبارات حسب الاسم أثناء العمل على إصلاح مجموعة اختبارات معينة. مزيد من المعلومات.
إذا رأيت شيئًا مثل Error watching file for changes: EMFILE على نظام التشغيل Mac OS، فقد يقوم brew install watchman بإصلاحه. انظر jestjs/jest#1767

تشغيل مجموعة فرعية من الاختبارات

افتراضيًا، سيقوم yarn test فقط بتشغيل مجموعة فرعية من الاختبارات المتعلقة بالرمز الذي تعمل عليه.

لتشغيل مجموعة فرعية من الاختبارات بشكل صريح، يمكنك كتابة t أو p والتي تم شرحها في استخدام jest watch.

وبدلاً من ذلك، يمكنك بدء تشغيل الاختبار باستخدام ملف محدد أو تعبير عادي، مثل:

 yarn test tests/unit/amo/components/TestAddon.js

تشغيل كافة الاختبارات

إذا كنت تريد تشغيل جميع الاختبارات والخروج، فاكتب:

 yarn test-once

إسلينت

أثناء تشغيل الاختبارات، سترى تقريرًا عن أخطاء Eslint في نهاية مخرجات الاختبار:

 yarn test

إذا كنت ترغب في إجراء اختبارات بدون اختبارات Eslint، فقم بتعيين متغير بيئة:

 NO_ESLINT=1 yarn test

تدفق

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

أثناء قيامك بإجراء الاختبارات، سترى تقريرًا عن أخطاء التدفق في نهاية مخرجات الاختبار:

 yarn test

إذا كنت ترغب في إجراء اختبارات بدون عمليات التحقق من التدفق، فقم بتعيين متغير بيئة:

 NO_FLOW=1 yarn test

للتحقق فقط من مشكلات التدفق أثناء التطوير أثناء تحرير الملفات، قم بتشغيل:

 yarn flow:dev

إذا كنت جديدًا في العمل مع Flow، فإليك بعض النصائح:

تحقق من دليل البدء.
اقرأ دليل web-ext للحصول على تلميحات حول كيفية حل أخطاء التدفق الشائعة.

لإضافة تغطية التدفق إلى ملف مصدر، ضع تعليق /* @flow */ في الأعلى. كلما زاد عدد الملفات المصدر التي يمكنك الاشتراك فيها في Flow، كان ذلك أفضل.

هنا بيان التدفق الخاص بنا:

نحن نستخدم Flow للإعلان عن هدف الكود الخاص بنا ومساعدة الآخرين على إعادة هيكلته بثقة. يسهل Flow أيضًا اكتشاف الأخطاء قبل قضاء ساعات في مصحح الأخطاء في محاولة لمعرفة ما حدث.
تجنب إعلانات التدفق السحري لأي تعليمات برمجية داخلية . ما عليك سوى الإعلان عن اسم مستعار للنوع بجوار الكود الذي تم استخدامه فيه وتصديره/استيراده مثل أي كائن آخر.
لا تقم أبدًا باستيراد كائن JS حقيقي فقط للإشارة إلى نوعه. أنشئ اسمًا مستعارًا للنوع واستورده بدلاً من ذلك.
لا تقم مطلقًا بإضافة تعليقات توضيحية للكتابة أكثر مما تحتاج إليه. يعد التدفق جيدًا حقًا في استنتاج الأنواع من كود JS القياسي؛ سيخبرك عندما تحتاج إلى إضافة تعليقات توضيحية واضحة.
عندما تأخذ دالة مثل getAllAddons وسيطات الكائن، قم باستدعاء كائن النوع الخاص بها GetAllAddonsParams . مثال:

 type GetAllAddonsParams = { |
  categoryId : number ,
| } ;

function getAllAddons ( { categoryId } : GetAllAddonsParams = { } ) {
  ...
}

استخدم أنواع الكائنات الدقيقة عبر بناء جملة الإخراج ( {| key: ... |} ) عندما يكون ذلك ممكنًا. في بعض الأحيان، يؤدي عامل الانتشار إلى ظهور خطأ مثل "النوع غير الدقيق غير متوافق مع النوع الدقيق" ولكن هذا خطأ. يمكنك استخدام الحل البديل Exact<T> من src/amo/types/util إذا كان عليك ذلك. يُقصد بهذا أن يكون بديلاً عمليًا لـ $Exact.
قم بإضافة تلميح نوع للمكونات المضمنة في HOCs (مكونات ذات ترتيب أعلى) حتى يتمكن Flow من التحقق من صحة الاستدعاءات للمكون. نحتاج إلى إضافة تلميح لأننا لا نملك حتى الآن تغطية جيدة لجميع المركبات ذات الترتيب الأعلى التي نعتمد عليها. هنا مثال:

 // Imagine this is something like components/ConfirmButton/index.js
import { compose } from 'redux' ;
import * as React from 'react' ;

// This expresses externally used props, i.e. to validate how the app would use <ConfirmButton />
type Props = { |
  prompt ?: string | null ,
| } ;

// This expresses internally used props, such as i18n which is injected by translate()
type InternalProps = { |
  ... Props ,
  i18n : I18nType ,
| } ;

export class ConfirmButtonBase extends React . Component < InternalProps > {
  render ( ) {
    const prompt = this . props . prompt || this . props . i18n . gettext ( 'Confirm' ) ;
    return < button > { prompt } < / button > ;
  }
}

// This provides a type hint for the final component with its external props.
// The i18n prop is not in external props because it is injected by translate() for internal use only.
const ConfirmButton : React . ComponentType < Props > = compose ( translate ( ) ) (
  ConfirmButtonBase ,
) ;

export default ConfirmButton ;

حاول تجنب الأنواع السائبة مثل Object أو any ، ولكن لا تتردد في استخدامها إذا كنت تقضي الكثير من الوقت في الإعلان عن الأنواع التي تعتمد على أنواع أخرى تعتمد على أنواع أخرى، وما إلى ذلك.
يمكنك إضافة تعليق $FlowFixMe لتخطي فحص التدفق إذا واجهت خطأ ما أو إذا اصطدمت بشيء يجعلك تضرب رأسك على لوحة المفاتيح. إذا كان هناك شيء تعتقد أنه غير قابل للإصلاح، فاستخدم $FlowIgnore بدلاً من ذلك. يرجى توضيح الأساس المنطقي الخاص بك في التعليق والارتباط بمشكلة GitHub إن أمكن.
إذا كنت في حيرة من أمرك بشأن سبب عدم عمل بعض التعليقات التوضيحية للتدفق، فحاول استخدام الأمر yarn flow type-at-pos ... لتتبع الأنواع التي يتم تطبيقها على التعليمات البرمجية. راجع yarn flow -- --help type-at-pos للحصول على التفاصيل.

أجمل

نحن نستخدم Prettier لتنسيق كود JavaScript الخاص بنا تلقائيًا وإيقاف جميع المناقشات الجارية حول الأنماط.

تغطية الكود

لرؤية تقرير عن تغطية التعليمات البرمجية، اكتب:

 yarn test-coverage-once

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

 open coverage/lcov-report/index.html

تشغيل AMO للتنمية المحلية

يتم توفير خادم وكيل لتشغيل تطبيق AMO باستخدام واجهة برمجة التطبيقات (API) على نفس المضيف مثل الواجهة الأمامية. هذا يحاكي إعداد الإنتاج لدينا.

ابدأ التطوير مقابل واجهة برمجة تطبيقات مستضافة مثل هذا:

 yarn amo:dev

يؤدي هذا إلى تكوين الوكيل لاستخدام https://addons-dev.allizom.org لبيانات واجهة برمجة التطبيقات. يعد هذا الأمر الطريقة الأكثر شيوعًا لتطوير ميزات الواجهة الأمامية الجديدة. راجع جدول الأوامر أعلاه للتعرف على طرق مشابهة لتشغيل الخادم.

لاستخدام خادم API محلي يعمل في Docker، يمكنك استخدام الأمر yarn amo . ومع ذلك، هذا لا يعمل حاليا. انظر العدد - 7196 .

ستعمل المصادقة عند بدئها من addons-frontend وستستمر في addons-server ولكنها لن تعمل عند تسجيل الدخول من صفحة addons-server. راجع mozilla/addons-server#4684 لمزيد من المعلومات حول إصلاح هذه المشكلة.

التكوين المحلي

إذا كنت بحاجة إلى تجاوز أي إعدادات أثناء تشغيل yarn amo أو yarn amo:dev أو yarn amo:stage ، فقم أولاً بإنشاء ملف تكوين محلي يسمى تمامًا كما يلي:

 touch config/local-development.js

قم بإجراء أي تغييرات في التكوين. على سبيل المثال:

 module . exports = {
  trackingEnabled : true ,
} ;

أعد تشغيل الخادم لترى أنه يسري مفعوله.

راجع مستندات ترتيب تحميل ملف التكوين لمعرفة المزيد حول كيفية تطبيق التكوين.

تكوين جهاز Android للتطوير المحلي

إذا كنت تريد الوصول إلى الخادم المحلي الخاص بك على جهاز يعمل بنظام Android، فستحتاج إلى تغيير بعض الإعدادات. لنفترض أن جهازك المحلي يمكن الوصول إليه على شبكتك على عنوان IP 10.0.0.1 . يمكنك بدء الخادم الخاص بك مثل هذا:

 API_HOST=http://10.0.0.1:3000 
    SERVER_HOST=10.0.0.1 
    WEBPACK_SERVER_HOST=10.0.0.1 
    yarn amo:dev

على جهاز Android الخاص بك، يمكنك بعد ذلك الوصول إلى موقع التطوير على http://10.0.0.1:3000 .

ملاحظة : في الوقت الحالي، ليس من الممكن تسجيل الدخول باستخدام هذا التكوين لأن عميل حسابات Mozilla يقوم بإعادة التوجيه إلى localhost:3000 . قد تتمكن من تجربة طريقة مختلفة عن طريق تحرير /etc/hosts على جهازك بحيث يشير localhost إلى جهاز التطوير الخاص بك ولكن لم يتم اختبار ذلك بشكل كامل.

تعطيل CSP للتنمية المحلية

عند التطوير محليًا باستخدام خادم حزمة الويب، فإن عنوان URL للأصل الذي تم إنشاؤه عشوائيًا سيفشل في سياسة أمان المحتوى (CSP) الخاصة بنا ويتسبب في فوضى وحدة التحكم الخاصة بك بالأخطاء. يمكنك إيقاف تشغيل كافة أخطاء CSP عن طريق ضبط CSP على false في أي ملف تكوين محلي، مثل local-development-amo.js . مثال:

 module . exports = {
  CSP : false ,
} ;

العمل على التوثيق

الوثائق التي تقرأها الآن موجودة داخل مستودع المصدر مثل Markdown بنكهة Github. عندما تقوم بإجراء تغييرات على هذه الملفات، يمكنك إنشاء طلب سحب لمعاينتها، أو الأفضل من ذلك، يمكنك استخدام القبضة لمعاينة التغييرات محليًا. بعد تثبيت grip ، قم بتشغيله من الدليل المصدر مثل هذا:

 grip .

افتح عنوان URL localhost وسترى الملف README.md الذي تم تقديمه. أثناء إجراء التعديلات، سيتم تحديثه تلقائيًا.

خدمات البناء والتشغيل

فيما يلي البرامج النصية المستخدمة في النشر - لن تحتاج إليها بشكل عام إلا إذا كنت تختبر شيئًا متعلقًا بالنشر أو الإصدارات.

vars env هي:

NODE_ENV : بيئة العقدة، مثل production أو development
NODE_CONFIG_ENV : اسم التكوين المراد تحميله، على سبيل المثال، dev ، stage ، prod

البرنامج النصي	وصف
بداية الغزل	يبدأ تشغيل الخادم السريع (يتطلب env vars)
بناء الغزل	إنشاء libs (جميع التطبيقات) (يتطلب env vars)

مثال: إنشاء مثيل إنتاجي للتطبيق وتشغيله:

 NODE_ENV=production NODE_CONFIG_ENV=prod yarn build
NODE_ENV=production NODE_CONFIG_ENV=prod yarn start

الجري يبني محليا

لتشغيل التطبيق محليًا في وضع الإنتاج، ستحتاج إلى إنشاء ملف تكوين لإصدارات الإنتاج المحلي. يمكن إنشاء بنيات الإنتاج لبيئات مختلفة: dev و stage و prod (يتم التحكم فيها بواسطة NODE_CONFIG_ENV env var)، ولكن هناك حاجة إلى ملف تكوين إضافي واحد فقط لتشغيل هذه البيئات محليًا.

أعد تسمية الملف المسمى config/local.js.dist إلى config/local.js . بعد ذلك، قم بإعادة البناء وإعادة التشغيل باستخدام yarn build yarn start كما هو موثق أعلاه. إذا كنت قد استخدمت 127.0.0.1 من قبل بتكوين مختلف، فتأكد من مسح ملفات تعريف الارتباط الخاصة بك. يجب أن يكون التطبيق متاحًا على: http://127.0.0.1:4000/.

ملاحظة : في الوقت الحالي، ليس من الممكن تسجيل الدخول باستخدام هذا الأسلوب.

ما هو الإصدار الذي تم نشره؟

يمكنك التحقق لمعرفة الالتزام الذي تم نشره لـ addons-frontend ، أو تجارب A/B قيد التشغيل، أو علامات الميزات التي تم تمكينها عن طريق تقديم طلب مثل هذا:

 curl https://addons-dev.allizom.org/__frontend_version__
{
    "build": "https://circleci.com/gh/mozilla/addons-frontend/10333",
    "commit": "47edfa6f24e333897b25516c587f504e294e8fa9",
    "experiments": {
        "homeHero": true
    },
    "feature_flags": {
        "enableFeatureAMInstallButton": true,
        "enableFeatureStaticThemes": true
    },
    "source": "https://github.com/mozilla/addons-frontend",
    "version": ""
}

سيعيد هذا استجابة 415 في حالة عدم وجود ملف version.json في الدليل الجذر. عادةً ما يتم إنشاء هذا الملف من خلال عملية النشر.

لتحقيق الاتساق مع البرامج النصية للمراقبة، يمكن استرداد نفس البيانات على عنوان URL هذا:

 curl https://addons-dev.allizom.org/__version__

يمكنك تثبيت ملحق amo-info لعرض هذه المعلومات بسهولة.

الأدوات الإضافية للمدونة الأمامية

يحتوي هذا المشروع أيضًا على تعليمات برمجية لإنشاء مكتبة باسم addons-frontend-blog-utils ويقدم الأوامر التالية:

yarn build:blog-utils-dev : قم ببناء المكتبة، وابدأ مراقبًا لإعادة بناء المكتبة عند التغيير وخدمة صفحة التطوير على http://127.0.0.1:11000
yarn build:blog-utils-prod : بناء المكتبة في وضع الإنتاج

تم تصميم هذه المكتبة حصريًا للعمل مع مدونة الإضافات.

عملية الإصدار

من أجل نشر نسخة جديدة من addons-frontend-blog-utils ، يجب دفع علامة خاصة إلى المستودع الرئيسي. يجب أن يبدأ اسم العلامة بـ blog-utils- وعادةً ما يحتوي على رقم الإصدار. يمكن أتمتة ذلك باستخدام الأمر التالي:

 npm version [major|minor|patch]

سيؤدي إصدار هذا الأمر من الفرع master إلى تحديث الإصدار الموجود في package.json وإنشاء التزام وإنشاء علامة. ادفع كلاً من هذا الالتزام والعلامة إلى المستودع الرئيسي.

ملحوظة: عند دمج إصدار addons-frontend-blog-utils الجديد في addons-blog، يجب عليك نشر إصدار جديد من قالب WordPress. يرجى اتباع هذه التعليمات في مستودع مدونة الإضافات.