بدء تشغيل مكتبة مكون React و TypeScript

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

TL / DR: يمكن الاطلاع على رمز مكتبة جاهزة للبدء على جيثب

يمكن تناول المشكلة من الجانبين:

1. العثور على مجموعة المبتدئين جاهزة ، أو المرجل أو مولد CLI
2. اجمع كل شيء بنفسك

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

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

إنشاء مكتبة رد فعل

لقد سمعت معظم المطورين الذين يتعاملون مع React عن بدء تطبيق React مناسب يتيح لك تقليل تكوين المشروع وتوفير افتراضيات معقولة - إنشاء تطبيق React (CRA). من حيث المبدأ ، يمكن استخدامه للمكتبة ( هناك مقال عن حبري ). ومع ذلك ، يختلف هيكل المشروع ونهجه في تطوير ui-kit قليلاً عن SPA المعتاد. نحتاج إلى دليل منفصل مع رموز مصدر المكونات (src) ، وصندوق رمل لتطويرها وتصحيحها (على سبيل المثال) ، وأداة للتوثيق والبيان التوضيحي ("الواجهة") ودليل منفصل مع الملفات المعدة للتصدير (dist). أيضًا ، لن تتم إضافة مكونات المكتبة إلى تطبيق SPA ، ولكن سيتم تصديرها من خلال ملف فهرس. بالتفكير في الأمر ، ذهبت للبحث واكتشفت بسرعة حزمة CRA مماثلة - إنشاء مكتبة تفاعلات (CRL).

CRL ، مثل CRA ، هي أداة CLI سهلة الاستخدام. استخدامه ، يمكنك إنشاء مشروع. وسوف تحتوي على:

• تم تكوين تراكمي لإنشاء وحدات cjs و es وخريطة مصدر مع دعم وحدات css
• بابل للتحويل في ES5
• دعابة للاختبارات
• TypeScript (TS) كخيار نود استخدامه

لإنشاء مشروع المكتبة ، يمكننا القيام بذلك (يسمح npx لنا بعدم تثبيت الحزم عالميًا):

npx create-react-library 

ونتيجة للأداة المساعدة ، نحصل على مشروع تم إنشاؤه وجاهز للعمل في مكتبة المكونات.

 npx npm-check -u 

tsdx

شكرا للمستخدم StanEgo ، الذي تحدث عن بديل ممتاز لإنشاء مكتبة التفاعل - tsdx . تشبه cli-utility أيضًا CRA وستقوم في أمر واحد بإنشاء أساس لمكتبتك من خلال إعدادات Rollup و TS و Prettier و husky و Jest و React. ويأتي React كخيار. بسيطة بما يكفي للقيام:

 npx tsdx create mytslib 

ونتيجة لذلك ، سيتم تثبيت الإصدارات الجديدة الضرورية من الحزم وإعداد جميع الإعدادات. الحصول على مشروع تشبه CRL. الفرق الرئيسي من CRL هو Zero-config. وهذا يعني أن تهيئة Rollup مخفية عنا في tsdx (مثلما يفعل CRA).

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

السيطرة على أيدينا

ولكن ماذا لو ذهبت في الطريق الثاني وجمع كل شيء بنفسك؟ لذلك ، لنبدأ من البداية. قم بتشغيل npm init وإنشاء npm init . للمكتبة. إضافة بعض المعلومات حول حزمة لدينا هناك. على سبيل المثال ، نكتب الحد الأدنى من الإصدارات للعقدة و npm في مجال engines . سيتم وضع الملفات التي تم جمعها وتصديرها في دليل dist . نشير إلى هذا في مجال files . نحن بصدد إنشاء مكتبة من مكونات التفاعل ، لذلك نأمل أن يحصل المستخدمون على الحزم الضرورية - peerDependencies الحد الأدنى للإصدارات المطلوبة من react و react-dom في مجال peerDependencies .

الآن تثبيت حزم react و react-dom والأنواع الضرورية (بما أننا سننشر المكونات على TypeScript) باعتبارها devDependencies (مثل كل الحزم في هذه المقالة):

 npm install --save-dev react react-dom @types/react @types/react-dom 

تثبيت TypeScript:

 npm install --save-dev typescript 

لنقم بإنشاء ملفات التكوين للرمز والاختبارات الرئيسية: tsconfig.json و tsconfig.test.json . سيكون هدفنا في es5 ، سنقوم بإنشاء sourceMap ، إلخ. قائمة كاملة من الخيارات الممكنة ومعانيها يمكن العثور عليها في الوثائق . لا تنس include دليل المصدر في include ، وقم بإضافة node_modules والدلائل dist في node_modules . في package.json حدد في حقل typings أين يمكن الحصول على أنواع لمكتبتنا - dist/index .

قم src دليل src للمكونات المصدر للمكتبة. أضف كل أنواع الأشياء الصغيرة ، مثل .editorconfig و .editorconfig ، ملف به ترخيص و README.md .

التراكمي

سوف نستخدم Rollup للتجميع ، كما اقترح CRL. الحزم المطلوبة والتكوين ، وأنا تجسست أيضا على CRL. بشكل عام ، سمعت الرأي القائل بأن Rollup مفيد للمكتبات و Webpack للتطبيقات. ومع ذلك ، لم أقوم بتكوين Webpack (ما تفعله CRA بالنسبة لي) ، لكن Rollup جيد حقًا وبسيط وجميل.

TO INSTALL:

 npm install --save-dev rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-typescript2 rollup-plugin-url @svgr/rollup 

في package.json أضف الحقول مع توزيع حزم المكتبات التي تم جمعها ، كما يوصي rollup - pkg.module :

  "main": "dist/index.js", "module": "dist/index.es.js", "jsnext:main": "dist/index.es.js" 

 import typescript from 'rollup-plugin-typescript2'; import commonjs from 'rollup-plugin-commonjs'; import external from 'rollup-plugin-peer-deps-external'; import postcss from 'rollup-plugin-postcss'; import resolve from 'rollup-plugin-node-resolve'; import url from 'rollup-plugin-url'; import svgr from '@svgr/rollup'; import pkg from './package.json'; export default { input: 'src/index.tsx', output: [ { file: pkg.main, format: 'cjs', exports: 'named', sourcemap: true }, { file: pkg.module, format: 'es', exports: 'named', sourcemap: true } ], plugins: [ external(), postcss({ modules: false, extract: true, minimize: true, sourceMap: true }), url(), svgr(), resolve(), typescript({ rollupCommonJSResolveHack: true, clean: true }), commonjs() ] }; 

التكوين هو ملف js ، أو بالأحرى كائن تم تصديره. في حقل input ، حدد الملف الذي يتم فيه تسجيل الصادرات لمكتبتنا. output - يصف توقعاتنا بشأن المخرجات - في أي وحدة لتجميعها في التنسيق ومكان وضعها.

أضف أمرًا في حقل scripts package.json لإنشاء ( "build": "rollup -c" ) وابدأ التجميع في وضع المراقبة أثناء التطوير ( "start": "rollup -c -w && npm run prettier-watch" ) .

المكون الأول وملف التصدير

سنقوم الآن بكتابة أبسط مكونات التفاعل للتحقق من كيفية عمل التجميع الخاص بنا. سيتم وضع كل مكون في المكتبة في دليل منفصل في الدليل الأصل - src/components/ExampleComponent . سيحتوي هذا الدليل على جميع الملفات المرتبطة بالمكون - tsx و css و test.tsx وما إلى ذلك.
لنقم بإنشاء ملف أنماط للمكون وملف tsx للمكون نفسه.

 /** * @class ExampleComponent */ import * as React from 'react'; import './ExampleComponent.css'; export interface Props { /** * Simple text prop **/ text: string; } /** My First component */ export class ExampleComponent extends React.Component<Props> { render() { const { text } = this.props; return ( <div className="test"> Example Component: {text} <p>Coool!</p> </div> ); } } export default ExampleComponent; 

تحتاج أيضًا في src إلى إنشاء ملف بأنواع شائعة في المكتبات ، حيث سيتم الإعلان عن نوع من أجل css و svg (منتقاة في CRL).

 /** * Default CSS definition for typescript, * will be overridden with file-specific definitions by rollup */ declare module '*.css' { const content: { [className: string]: string }; export default content; } interface SvgrComponent extends React.FunctionComponent<React.SVGAttributes<SVGElement>> {} declare module '*.svg' { const svgUrl: string; const svgComponent: SvgrComponent; export default svgUrl; export { svgComponent as ReactComponent }; } 

يجب تحديد جميع المكونات المصدرة و css في ملف التصدير. لدينا - src/index.tsx . إذا لم يتم استخدام بعض المغلق في المشروع ولم يتم إدراجه كجزء من تلك التي تم استيرادها إلى src/index.tsx ، فسيتم طرحها خارج التجميع ، وهو أمر جيد.

 import { ExampleComponent, Props } from './ExampleComponent'; import './export.css'; export { ExampleComponent, Props }; 

الآن يمكنك محاولة بناء المكتبة - npm run build . نتيجة لذلك ، تبدأ rollup وتجميع مكتبتنا في حزم ، والتي سنجدها في دليل dist .

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

نسيان تنسيق التعليمات البرمجية مع Prettier

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

 npm install --save-dev prettier 

إضافة التكوين لقليل صقل قواعد التنسيق.

 { "tabWidth": 3, "singleQuote": true, "jsxBracketSameLine": true, "arrowParens": "always", "printWidth": 100, "semi": true, "bracketSpacing": true } 

يمكنك رؤية معنى القواعد المتاحة في الوثائق . سيقترح WebStrom بعد إنشاء ملف التكوين نفسه استخدام prettier عند بدء التنسيق من خلال IDE. لمنع التنسيق من إضاعة الوقت ، أضف /node_modules و /dist الدليل إلى الاستثناءات باستخدام ملف .prettierignore (يشبه التنسيق .prettierignore ). الآن يمكنك تشغيل prettier خلال تطبيق قواعد التنسيق على التعليمات البرمجية المصدر:

 prettier --write "**/*" 

من أجل عدم تشغيل الأمر بشكل صريح في كل مرة بيديك وللتأكد من أن رمز مطوري المشروع الآخرين سيتم تنسيقه بشكل أفضل ، قم بإضافة تشغيل prettier على الخط precommit-hook للملفات التي تم وضع علامة عليها على staged (عبر git add ). لمثل هذا الشيء ، نحن بحاجة إلى أداتين. أولاً ، إنه مسك ، مسؤول عن تنفيذ أي أوامر قبل الالتزام أو الدفع أو غير ذلك. وثانياً ، يتم تشغيله على شكل الوبر ، والذي يمكنه تشغيل أنواع مختلفة من الملفات على ملفات ذات staged . نحتاج إلى تنفيذ سطر واحد فقط لتقديم هذه الحزم وإضافة أوامر الإطلاق إلى package.json :

 npx mrm lint-staged 

لا يمكننا انتظار التنسيق قبل الالتزام ، ولكن تأكد من أن prettier يعمل باستمرار على الملفات المعدلة في عملية عملنا. نعم ، نحن بحاجة إلى حزمة أخرى - onchange . يسمح لك بمراقبة التغييرات على الملفات في المشروع وتنفيذ الأمر الذي يحتاجون إليه على الفور. تعيين:

 npm install --save-dev --save-exact onchange 

ثم نضيف إلى أوامر الحقل scripts في package.json :

 "prettier-watch": "onchange 'src/**/*' -- prettier --write {{changed}}" 

في هذا الصدد ، يمكن اعتبار جميع الخلافات حول التنسيق في المشروع مغلقة.

تجنب الأخطاء مع ESLint

أصبحت ESLint معيارًا طويلًا ويمكن العثور عليها في جميع مشاريع js و ts تقريبًا. سوف يساعدنا أيضًا. في تكوين ESLint ، أثق في CRA ، لذلك فقط اصطحب الحزم الضرورية من CRA وقم بتوصيلها في مكتبتنا. بالإضافة إلى ذلك ، أضف التكوينات لـ TS ESLint (لتجنب التعارض بين ESLint ):

 npm install --save-dev eslint eslint-config-react-app eslint-loader eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint eslint-config-prettier eslint-plugin-prettier 

ESLint باستخدام ملف التكوين.

 { "extends": [ "plugin:@typescript-eslint/recommended", "react-app", "prettier", "prettier/@typescript-eslint" ], "plugins": [ "@typescript-eslint", "react" ], "rules": { "@typescript-eslint/no-empty-interface": "off", "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/explicit-member-accessibility": "off" } } 

أضف الأمر lint - eslint src/**/* --ext .ts,.tsx --fix إلى حقل scripts من package.json . الآن يمكنك تشغيل eslint من خلال npm run lint .

اختبار مع Jest

لكتابة اختبارات الوحدات لمكونات المكتبة ، قم بتثبيت Jest ، وهي مكتبة اختبار من facebook. ومع ذلك ، منذ ذلك الحين نقوم بتجميع TS ليس من خلال babel 7 ، ولكن من خلال tsc ، ثم نحتاج إلى تثبيت حزمة ts-jest أيضًا:

 npm install --save-dev jest ts-jest @types/jest 

لكي تقبل jest واردات css أو غيرها من الملفات بشكل صحيح ، تحتاج إلى استبدالها بـ mokami. قم __mocks__ دليل __mocks__ وإنشاء ملفين هناك.
styleMock.ts :

 module.exports = {}; 

fileMock.ts :

 module.exports = 'test-file-stub'; 

الآن إنشاء التكوين jest.

 module.exports = { preset: 'ts-jest', testEnvironment: 'node', moduleNameMapper: { '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.ts', '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.ts' } }; 

ExampleComponent أبسط اختبار لـ ExampleComponent الخاص بنا في الدليل الخاص به.

 import { ExampleComponent } from './ExampleComponent'; describe('ExampleComponent', () => { it('is truthy', () => { expect(ExampleComponent).toBeTruthy(); }); }); 

قم بإضافة الأمر - npm run lint && jest إلى حقل scripts لـ package.json . من أجل الموثوقية ، سنقوم أيضًا بقيادة السيارة. يمكنك الآن إجراء اختباراتنا والتأكد من اجتيازها - npm run test . وبحيث لا تقع الاختبارات في dist أثناء التجميع ، أضف حقل exclude في المكون الإضافي Rollup config exclude - ['src/**/*.test.(tsx|ts)'] . حدد اختبارات التشغيل في husky pre-commit hook "pre-commit": "npm run test && lint-staged" husky pre-commit hook قبل تشغيل lint-staged "pre-commit": "npm run test && lint-staged" .

تصميم وتوثيق واعجاب مكونات مع Storybook

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

ومع ذلك ، قررت هذه المرة إلقاء نظرة فاحصة على منافسه - Storybook . اليوم يبدو أكثر قوة مع نظام البرنامج المساعد. بالإضافة إلى ذلك ، يتطور باستمرار ، ويحتوي على مجتمع كبير ، وسيبدأ قريبًا أيضًا في إنشاء صفحات الوثائق الخاصة به باستخدام ملفات تخفيض السعر. ميزة أخرى من Storybook هو أنه رمل - بيئة لتطوير المكونات المعزولة. هذا يعني أننا لسنا بحاجة إلى أي تطبيقات نموذجية كاملة لتطوير المكونات (كما تشير CRL). في القصص القصيرة ، نكتب stories - ملفات ts التي ننقل بها مكوناتنا مع بعض أدوات الإدخال إلى وظائف خاصة (من الأفضل أن ننظر إلى الشفرة لجعلها أكثر وضوحًا). نتيجة لذلك ، يتم تجميع تطبيق عرض من هذه stories .

قم بتشغيل البرنامج النصي الذي يقوم بتهيئة القصص القصيرة:

 npx -p @storybook/cli sb init 

الآن صداقات مع TS. للقيام بذلك ، نحتاج إلى عدد قليل من الحزم ، وفي نفس الوقت سنضع بعض الإضافات المفيدة:

 npm install --save-dev awesome-typescript-loader @types/storybook__react @storybook/addon-info react-docgen-typescript-loader @storybook/addon-actions @storybook/addon-knobs @types/storybook__addon-info @types/storybook__addon-knobs webpack-blocks 

قام البرنامج النصي بإنشاء دليل بتكوين مجموعة .storybook - .storybook مثال .storybook بلا رحمة. وفي دليل التكوين ، قمنا بتغيير ملحقات الملحق والتهيئة إلى ts . نضيف إضافات إلى ملف addons.ts :

 import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-knobs/register'; 

الآن ، أنت بحاجة إلى مساعدة مجموعة القصص القصيرة باستخدام تكوين webpack في دليل .storybook .

 module.exports = ({ config }) => { config.module.rules.push({ test: /\.(ts|tsx)$/, use: [ { loader: require.resolve('awesome-typescript-loader') }, // Optional { loader: require.resolve('react-docgen-typescript-loader') } ] }); config.resolve.extensions.push('.ts', '.tsx'); return config; }; 

دعنا config.ts ، ونضيف بعض الديكورات لربط الوظائف الإضافية بكل قصصنا.

 import { configure } from '@storybook/react'; import { addDecorator } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { withKnobs } from '@storybook/addon-knobs'; // automatically import all files ending in *.stories.tsx const req = require.context('../src', true, /\.stories\.tsx$/); function loadStories() { req.keys().forEach(req); } configure(loadStories, module); addDecorator(withInfo); addDecorator(withKnobs); 

ExampleComponent story الأولى في دليل مكون ExampleComponent

 import * as React from 'react'; import { storiesOf } from '@storybook/react'; import { ExampleComponent } from './ExampleComponent'; import { text } from '@storybook/addon-knobs/react'; const stories = storiesOf('ExampleComponent', module); stories.add('ExampleComponent', () => <ExampleComponent text={text('text', 'Some text')} />, { info: { inline: true }, text: ` ### Notes Simple example component ### Usage ~~~js <ExampleComponent text="Some text" /> ~~~ ` }); 

لاحظ الآن أن البرنامج النصي لتهيئة القصص القصيرة يضيف أمر القصص القصيرة إلى package.json . استخدامه npm run storybook . سيتم تجميع Storybook وتشغيله على http://localhost:6006 . لا تنس أن تضيف إلى استثناء الوحدة النمطية 'src/**/*.stories.tsx' في التهيئة Rollup - 'src/**/*.stories.tsx' .

نحن نطور

لذا ، بعد أن أحاطت نفسك بالعديد من الأدوات المناسبة وإعدادها للعمل ، يمكنك البدء في تطوير مكونات جديدة. سيتم وضع كل مكون في الدليل الخاص به في src/components مع اسم المكون. سوف يحتوي على جميع الملفات المرتبطة به - css ، المكون نفسه في ملف tsx والاختبارات والقصص. نبدأ في كتاب القصص القصيرة ، وننشئ قصص للمكون ، وهناك نكتب وثائق له. نخلق الاختبارات والاختبار. تتم كتابة استيراد وتصدير المكون النهائي في index.ts .

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

 npm i -s git+https://github.com/jmorozov/react-library-example.git 

بحيث في تطبيق مستهلك المكتبة في دليل node_modules لا يوجد سوى محتويات دليل dist في الحالة المجمعة ، تحتاج إلى إضافة أمر "prepare": "npm run build" إلى حقل scripts .

أيضًا ، بفضل TS ، سيعمل الإكمال التلقائي في IDE.

لتلخيص

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

يمكنك أيضا أن تأخذ الشغل الناتج هنا .

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