translate(scaling-up): SFC enhance translation

Author: ousszizou

src/guide/scaling-up/sfc.md

@@ -2,7 +2,7 @@
 
 ## مقدمة {#introduction}
 
-مكونات vue أحادية الملف ( التي تُسمَّى أو تُعرف أيضا باسم ملفات `*.vue` ، و المختصرة باسم **SFC** ) هي تنسيق ملف خاص يسمح لنا بتغليف القالب، المنطق و التنسيق لمُكون vue في ملف واحد. إليك مثال SFC:
+مكونات vue أحادية الملف ( التي تُسمَّى أو تُعرف أيضا باسم ملفات `*.vue` ، و المختصرة باسم **SFC** ) هي تنسيق ملف خاص يسمح لنا بتغليف القالب، الشيفرة البرمجية و التنسيق لمُكون vue في ملف واحد. إليك مثال SFC:
 
 <div class="options-api">
 
@@ -61,23 +61,22 @@ const greeting = ref('Hello World!')
 
 - صياغة مُكونات مُركبة باستخدام صيغة HTML، CSS و JavaScript المُعتادة.
 - [تجميع الاهتمامات ( الجوانب و العوامل املختلفة التي يجب مُراعاتها ) المُترابطة بطبيعتها.](#what-about-separation-of-concerns)
-- قوالب مُجمعة مُسبقا بدون تكلفة التجميع أثناء التشغيل.
+- قوالب مُصرفة مُسبقا بدون تكلفة التصريف أثناء التشغيل.
 - [CSS ذات نطاق المُكون ( التنسيق أو النمط يكون مُحدد بشكل خاص للمُكون ).](/api/sfc-css-features)
 - [صياغة أكثر سلاسة عند العمل مع الواجهة التركيبية لبرمجة التطبيقات](/api/sfc-script-setup)
 - المزيد من تحسينات مرحلة الترجمة عن طريق تحليل متقاطع بين القالب و المنطق البرمجي
 - [دعم مُحرر بيئة التطوير المتكاملة](/guide/scaling-up/tooling.html#ide-support) مع إكمال تلقائي و فحص نوع البيانات لتعبيرات القوالب.
 - دعم ميزة استبدال الوحدات النمطية الحية أثناء تشغيل التطبيق دون الحاجة إلى أي تهيئة إضافية.
 
-المكونات أحادية الملف من المميزات المحددة لـ Vue كإطار عمل، و يُعتبر النهج الموصى به لاستخدام Vue في السيناريوهات التالي:
-- تطبيقات الصفحة الواحدة ( SPA )
+المكونات أحادية الملف من المميزات المحددة لـ Vue كإطار عمل، و يُعتبر النهج الموصى به لاستخدام Vue في السيناريوهات التالية:
+- التطبيقات أحادية الصفحة ( SPA )
 - مولدات مواقع الويب الساكنة ( SSG )
-- أي واجهة أمامية غير بسيطة أين هنالك تبرير لاستخدام مرحلة بناء المشروع لتوفير تجربة تطوير أفضل
-
-ومع ذلك ، ندرك أن هناك سيناريوهات يمكن أن تبدو فيها مكونات أحادية الملف و كأنها مُبالغة. هذا هو السبب في أنه لا يزال من الممكن استخدام Vue عبر JavaScript بشكل عادي بدون مرحلة بناء. إذا كنت تبحث فقط عن تحسين HTML  إلى حد كبير من خلال التفاعلات الخفيفة ، فيُمكنك أيضا إلقاء نظرة على [petite-vue](https://github.com/vuejs/petite-vue) ، وهي نُسخة محدودة بحجم 6 كيلو بايت من Vue محسّنة من أجل التحسين التدريجي.
+- أي واجهة أمامية غير بسيطة حيث يمكن تبرير استخدام عملية بناء المشروع لتوفير تجربة تطوير أفضل
 
+ومع ذلك ، ندرك أن هناك سيناريوهات يمكن أن تبدو فيها مكونات أحادية الملف و كأنها مُبالغة. هذا هو السبب في أنه لا يزال من الممكن استخدام Vue عبر JavaScript بشكل عادي بدون مرحلة بناء. إذا كنت تبحث فقط عن تحسين HTML  إلى حد كبير من خلال التفاعلات الخفيفة ، فيُمكنك أيضا إلقاء نظرة على [petite-vue](https://github.com/vuejs/petite-vue) ، وهي نُسخة محدودة بحجم 6 كيلو بايت من Vue محسّنة من أجل تعزيز التدرج
 ## كيف تعمل {#how-it-works}
 
-المٌكون أحادي الملف لـ vue هو تنسيق ملف خاص بإطار العمل و يجب تصريفه مُسبقا بواسطة [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc) إلى جافاسكربت القياسية و CSS. المُكون أحادي الملف (SFC) المُصرف هو وحدة جافاسكربت قياسية (ES) - مما يعني أنه مع الإعداد المُناسب لمرحلة البناء، يُمكنك استيراد المكون أحادي الملف (SFC) كوحدة:
+المٌكون أحادي الملف لـ vue هو تنسيق ملف خاص بإطار العمل و يجب تصريفه مُسبقا بواسطة [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc) إلى standard JavaScript و CSS. المُكون أحادي الملف (SFC) المُجمع هو standard JavaScript (ES) module (ES) - مما يعني أنه مع الإعداد المُناسب لمرحلة البناء، يُمكنك استيراد المكون أحادي الملف (SFC) كوحدة:
 
 ```js
 import MyComponent from './MyComponent.vue'
@@ -89,17 +88,17 @@ export default {
 }
 ```
 
-عادة ما يتم حقن وسوم `style` داخل المكونات أحادية الملف كـوُسوم `style` أصلية أثناء التطوير لدعم التحديثات النشطة. لبيئة الإنتاج يُمكن فصلهم و دمجهم في ملف CSS واحد.
+عادة تُدرج وسوم `<style>` داخل المكونات أحادية الملف كوسوم `<style>` الأصلية أثناء التطوير لدعم التحديثات النشطة. أما في مرحلة الإنتاج يمكن استخراجها ودمجها في ملف CSS واحد.
 
-يمكنك اللعب مع ملفات SFC و استكشاف كيفية تجميعها في [Vue SFC Playground](https://sfc.vuejs.org/).
+يمكنك تجربة المكونات أحادية الملف واستكشاف كيفية تصريفها في [Vue SFC Playground](https://sfc.vuejs.org/).
 
 في المشاريع الفعلية ، ندمج عادة مُترجم SFC مع أداة بناء مثل [Vite](https://vitejs.dev/) أو [Vue CLI](http://cli.vuejs.org/) (التي تعتمد على [webpack](https://webpack.js.org/)) ، وتوفر Vue أدوات تخطيط رسمية لبدء العمل مع ملفات SFC بأسرع ما يمكن. تحقق من المزيد من التفاصيل في قسم [أدوات SFC](/guide/scaling-up/tooling).
 
-## ماذا عن فصل الإهتمامات؟ {#what-about-separation-of-concerns}
+## ماذا عن فصل نوع الشيفرات؟ {#what-about-separation-of-concerns}
 
-بعض المستخدمين القادمين من خلفية تطوير الويب التقليدية قد يكون لديهم القلق من أن  المكونات أحادية الملف تخلط اهتمامات مختلفة في نفس المكان - والتي كان من المفترض أن تفصلها HTML / CSS / JS!
+بعض المستخدمين القادمين من خلفية تطوير الويب التقليدية قد يكون لديهم القلق من أن  المكونات أحادية الملف تخلط نوع شيفرات مختلفة في نفس المكان - والتي كان من المفترض أن تفصلها HTML / CSS / JS!
 
-للإجابة على هذا السؤال، من المهم بالنسبة لنا الاتفاق على أن **فصل الاهتمامات لا يعني فصل أنواع الملفات.** الهدف النهائي من مبادئ الهندسة هو تحسين قابلية صيانة الشيفرة البرمجية. فصل الاهتمامات، عند تطبيقه بشكل متعصب كفصل أنواع الملفات، لا يساعدنا في تحقيق هذا الهدف في سياق تطبيقات الواجهة الأمامية المعقدة بشكل متزايد.
+للإجابة على هذا السؤال، من المهم بالنسبة لنا الاتفاق على أن **فصل نوع الشيفرات لا يعني فصل أنواع الملفات.** الهدف النهائي من مبادئ الهندسة هو تحسين قابلية صيانة الشيفرة البرمجية. فصل نوع الشيفرات عند تطبيقه بشكل متعصب كفصل أنواع الملفات، لا يساعدنا في تحقيق هذا الهدف في سياق تطبيقات الواجهة الأمامية المعقدة بشكل متزايد.
 
 في تطوير واجهة المستخدم الحديثة ، وجدنا أنه بدلاً من تقسيم الشيفرة البرمجية إلى ثلاث طبقات ضخمة تتشابك مع بعضها البعض ، فمن المنطقي تقسيمها إلى مكونات غير مترابطة وتشكيلهم معا. داخل مُكون، فإن قالبه ومنطقه وأنماطه مقترنة بطبيعتها، ويجعل تجميعهم معًا المكون أكثر تماسكًا وقابلية للصيانة.