docs(ar): translate React Compiler reference, performance tracks, community videos

Made-with: Cursor

Author: hamdymohamedak

src/content/community/videos.md

@@ -4,109 +4,109 @@ title: compilationMode
 
 <Intro>
 
-The `compilationMode` option controls how the React Compiler selects which functions to compile.
+يتحكم خيار `compilationMode` في كيفية اختيار React Compiler للدوال التي يُجمّعها.
 
 </Intro>
 
 ```js
 {
-  compilationMode: 'infer' // or 'annotation', 'syntax', 'all'
+  compilationMode: 'infer' // أو 'annotation' أو 'syntax' أو 'all'
 }
 ```
 
 <InlineToc />
 
 ---
 
-## Reference {/*reference*/}
+## المرجع {/*reference*/}
 
 ### `compilationMode` {/*compilationmode*/}
 
-Controls the strategy for determining which functions the React Compiler will optimize.
+يحدد الاستراتيجية لمعرفة أي الدوال سيُحسِّنها React Compiler.
 
-#### Type {/*type*/}
+#### النوع {/*type*/}
 
 ```
 'infer' | 'syntax' | 'annotation' | 'all'
 ```
 
-#### Default value {/*default-value*/}
+#### القيمة الافتراضية {/*default-value*/}
 
 `'infer'`
 
-#### Options {/*options*/}
+#### الخيارات {/*options*/}
 
-- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks:
-  - Functions explicitly annotated with `"use memo"` directive
-  - Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks
+- **`'infer'`** (الافتراضي): يستخدم المُصرّف استدلالاً لتحديد مكوّنات React وhooks:
+  - دوال موسومة صراحة بتوجيه `"use memo"`
+  - دوال تُسمّى كمكوّنات (PascalCase) أو hooks (بادئة `use`) **وتُنشئ JSX** و/أو **تستدعي hooks أخرى**
 
-- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption.
+- **`'annotation'`**: يُجمّع فقط الدوال الموسومة بتوجيه `"use memo"`. مناسب للتبنّي التدريجي.
 
-- **`'syntax'`**: Only compile components and hooks that use Flow's [component](https://flow.org/en/docs/react/component-syntax/) and [hook](https://flow.org/en/docs/react/hook-syntax/) syntax.
+- **`'syntax'`**: يُجمّع فقط المكوّنات والـ hooks التي تستخدم صياغة Flow لـ [component](https://flow.org/en/docs/react/component-syntax/) و[hook](https://flow.org/en/docs/react/hook-syntax/).
 
-- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions.
+- **`'all'`**: يُجمّع كل الدوال على المستوى الأعلى. غير موصى به لأنه قد يُجمّع دوالاً ليست من React.
 
-#### Caveats {/*caveats*/}
+#### ملاحظات {/*caveats*/}
 
-- The `'infer'` mode requires functions to follow React naming conventions to be detected
-- Using `'all'` mode may negatively impact performance by compiling utility functions
-- The `'syntax'` mode requires Flow and won't work with TypeScript
-- Regardless of mode, functions with `"use no memo"` directive are always skipped
+- وضع `'infer'` يتطلّب تسمية تتبع اصطلاحات React ليُكتشف المكوّن
+- وضع `'all'` قد يضرّ بالأداء بتجميع دوال مساعدة
+- وضع `'syntax'` يتطلّب Flow ولا يعمل مع TypeScript
+- بغض النظر عن الوضع، الدوال التي تحتوي `"use no memo"` تُستبعد دائماً
 
 ---
 
-## Usage {/*usage*/}
+## الاستخدام {/*usage*/}
 
-### Default inference mode {/*default-inference-mode*/}
+### وضع الاستنتاج الافتراضي {/*default-inference-mode*/}
 
-The default `'infer'` mode works well for most codebases that follow React conventions:
+وضع `'infer'` الافتراضي يناسب أغلب القواعد التي تتبع اصطلاحات React:
 
 ```js
 {
   compilationMode: 'infer'
 }
 ```
 
-With this mode, these functions will be compiled:
+في هذا الوضع تُجمَّع أمثلة مثل:
 
 ```js
-// ✅ Compiled: Named like a component + returns JSX
+// ✅ يُجمَّع: اسم كمكوّن + يعيد JSX
 function Button(props) {
   return <button>{props.label}</button>;
 }
 
-// ✅ Compiled: Named like a hook + calls hooks
+// ✅ يُجمَّع: اسم كـ hook + يستدعي hooks
 function useCounter() {
   const [count, setCount] = useState(0);
   return [count, setCount];
 }
 
-// ✅ Compiled: Explicit directive
+// ✅ يُجمَّع: توجيه صريح
 function expensiveCalculation(data) {
   "use memo";
   return data.reduce(/* ... */);
 }
 
-// ❌ Not compiled: Not a component/hook pattern
+// ❌ لا يُجمَّع: ليس نمط مكوّن/hook
 function calculateTotal(items) {
   return items.reduce((a, b) => a + b, 0);
 }
 ```
 
-### Incremental adoption with annotation mode {/*incremental-adoption*/}
+### تبنّي تدريجي بوضع annotation {/*incremental-adoption*/}
 
-For gradual migration, use `'annotation'` mode to only compile marked functions:
+للهجرة التدريجية استخدم `'annotation'` لتجميع الدوال الموسومة فقط:
 
 ```js
 {
   compilationMode: 'annotation'
 }
 ```
 
-Then explicitly mark functions to compile:
+ثم علّم الدوال يدوياً:
 
 ```js
-// Only this function will be compiled
+// هذه الدالة فقط تُجمَّع
 function ExpensiveList(props) {
   "use memo";
   return (
@@ -118,51 +118,51 @@ function ExpensiveList(props) {
   );
 }
 
-// This won't be compiled without the directive
+// بدون التوجيه لا تُجمَّع
 function NormalComponent(props) {
   return <div>{props.content}</div>;
 }
 ```
 
-### Using Flow syntax mode {/*flow-syntax-mode*/}
+### وضع صياغة Flow {/*flow-syntax-mode*/}
 
-If your codebase uses Flow instead of TypeScript:
+إذا كانت قاعدتك تستخدم Flow بدل TypeScript:
 
 ```js
 {
   compilationMode: 'syntax'
 }
 ```
 
-Then use Flow's component syntax:
+ثم استخدم صياغة مكوّنات Flow:
 
 ```js
-// Compiled: Flow component syntax
+// يُجمَّع: صياغة مكوّن Flow
 component Button(label: string) {
   return <button>{label}</button>;
 }
 
-// Compiled: Flow hook syntax
+// يُجمَّع: صياغة hook في Flow
 hook useCounter(initial: number) {
   const [count, setCount] = useState(initial);
   return [count, setCount];
 }
 
-// Not compiled: Regular function syntax
+// لا يُجمَّع: دالة عادية
 function helper(data) {
   return process(data);
 }
 ```
 
-### Opting out specific functions {/*opting-out*/}
+### استبعاد دوال محدّدة {/*opting-out*/}
 
-Regardless of compilation mode, use `"use no memo"` to skip compilation:
+بغض النظر عن وضع التجميع، استخدم `"use no memo"` لتخطّي التجميع:
 
 ```js
 function ComponentWithSideEffects() {
-  "use no memo"; // Prevent compilation
+  "use no memo"; // منع التجميع
 
-  // This component has side effects that shouldn't be memoized
+  // هذا المكوّن له تأثيرات جانبية لا يجب تذكّرها
   logToAnalytics('component_rendered');
 
   return <div>Content</div>;
@@ -171,29 +171,29 @@ function ComponentWithSideEffects() {
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## استكشاف الأعطال {/*troubleshooting*/}
 
-### Component not being compiled in infer mode {/*component-not-compiled-infer*/}
+### المكوّن لا يُجمَّع في وضع infer {/*component-not-compiled-infer*/}
 
-In `'infer'` mode, ensure your component follows React conventions:
+في `'infer'` تأكد من اصطلاحات React:
 
 ```js
-// ❌ Won't be compiled: lowercase name
+// ❌ لن يُجمَّع: اسم بحروف صغيرة
 function button(props) {
   return <button>{props.label}</button>;
 }
 
-// ✅ Will be compiled: PascalCase name
+// ✅ سيُجمَّع: PascalCase
 function Button(props) {
   return <button>{props.label}</button>;
 }
 
-// ❌ Won't be compiled: doesn't create JSX or call hooks
+// ❌ لن يُجمَّع: لا ينشئ JSX ولا يستدعي hooks
 function useData() {
   return window.localStorage.getItem('data');
 }
 
-// ✅ Will be compiled: calls a hook
+// ✅ سيُجمَّع: يستدعي hook
 function useData() {
   const [data] = useState(() => window.localStorage.getItem('data'));
   return data;

src/content/reference/dev-tools/react-performance-tracks.md

@@ -1,48 +1,48 @@
 ---
-title: Compiling Libraries
+title: تجميع المكتبات
 ---
 
 <Intro>
-This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
+يساعدك هذا الدليل كمؤلف مكتبة على استخدام React Compiler لنشر شيفرة مكتبتك مُحسَّنة لمستخدميك.
 </Intro>
 
 <InlineToc />
 
-## Why Ship Compiled Code? {/*why-ship-compiled-code*/}
+## لماذا تنشر شيفرة مُجمَّعة؟ {/*why-ship-compiled-code*/}
 
-As a library author, you can compile your library code before publishing to npm. This provides several benefits:
+كمؤلف مكتبة يمكنك تجميع شيفرة المكتبة قبل النشر إلى npm. الفوائد تشمل:
 
-- **Performance improvements for all users** - Your library users get optimized code even if they aren't using React Compiler yet
-- **No configuration required by users** - The optimizations work out of the box
-- **Consistent behavior** - All users get the same optimized version regardless of their build setup
+- **تحسين الأداء لجميع المستخدمين** — يحصل مستخدمو مكتبتك على شيفرة مُحسَّنة حتى إن لم يفعّلوا React Compiler بعد
+- **لا إعداد مطلوب من المستخدمين** — التحسينات تعمل مباشرة
+- **سلوك متسق** — كل المستخدمون يحصلون على النسخة المُحسَّنة بغض النظر عن إعداد البناء
 
-## Setting Up Compilation {/*setting-up-compilation*/}
+## إعداد التجميع {/*setting-up-compilation*/}
 
-Add React Compiler to your library's build process:
+أضف React Compiler إلى عملية بناء مكتبتك:
 
 <TerminalBlock>
 npm install -D babel-plugin-react-compiler@latest
 </TerminalBlock>
 
-Configure your build tool to compile your library. For example, with Babel:
+اضبط أداة البناء لتجميع المكتبة. مثال مع Babel:
 
 ```js
 // babel.config.js
 module.exports = {
   plugins: [
     'babel-plugin-react-compiler',
   ],
-  // ... other config
+  // ... إعداد آخر
 };
 ```
 
-## Backwards Compatibility {/*backwards-compatibility*/}
+## التوافق مع الإصدارات السابقة {/*backwards-compatibility*/}
 
-If your library supports React versions below 19, you'll need additional configuration:
+إذا كانت مكتبتك تدعم إصدارات React أقل من 19، ستحتاج إعداداً إضافياً:
 
-### 1. Install the runtime package {/*install-runtime-package*/}
+### 1. تثبيت حزمة التشغيل {/*install-runtime-package*/}
 
-We recommend installing react-compiler-runtime as a direct dependency:
+نوصي بتثبيت `react-compiler-runtime` كتبعية مباشرة:
 
 <TerminalBlock>
 npm install react-compiler-runtime@latest
@@ -59,48 +59,48 @@ npm install react-compiler-runtime@latest
 }
 ```
 
-### 2. Configure the target version {/*configure-target-version*/}
+### 2. ضبط إصدار الاستهداف {/*configure-target-version*/}
 
-Set the minimum React version your library supports:
+عيّن أقل إصدار React تدعمه المكتبة:
 
 ```js
 {
-  target: '17', // Minimum supported React version
+  target: '17', // أقل إصدار React مدعوم
 }
 ```
 
-## Testing Strategy {/*testing-strategy*/}
+## استراتيجية الاختبار {/*testing-strategy*/}
 
-Test your library both with and without compilation to ensure compatibility. Run your existing test suite against the compiled code, and also create a separate test configuration that bypasses the compiler. This helps catch any issues that might arise from the compilation process and ensures your library works correctly in all scenarios.
+اختبر مكتبتك مع التجميع وبدونه لضمان التوافق. شغّل مجموعة الاختبارات الحالية على الشيفرة المُجمَّعة، وأنشئ إعداد اختبار منفصلاً يتخطّى المُصرّف. يساعد ذلك على اكتشاف مشاكل قد تنشأ عن التجميع ويضمن عمل المكتبة في كل السيناريوهات.
 
-## Troubleshooting {/*troubleshooting*/}
+## استكشاف الأعطال {/*troubleshooting*/}
 
-### Library doesn't work with older React versions {/*library-doesnt-work-with-older-react-versions*/}
+### المكتبة لا تعمل مع React أقدم {/*library-doesnt-work-with-older-react-versions*/}
 
-If your compiled library throws errors in React 17 or 18:
+إذا رمت المكتبة المُجمَّعة أخطاء في React 17 أو 18:
 
-1. Verify you've installed `react-compiler-runtime` as a dependency
-2. Check that your `target` configuration matches your minimum supported React version
-3. Ensure the runtime package is included in your published bundle
+1. تحقق من تثبيت `react-compiler-runtime` كتبعية
+2. تأكد أن إعداد `target` يطابق أقل إصدار React تدعمه
+3. تأكد من تضمين حزمة التشغيل في الحزمة المنشورة
 
-### Compilation conflicts with other Babel plugins {/*compilation-conflicts-with-other-babel-plugins*/}
+### تعارض التجميع مع إضافات Babel أخرى {/*compilation-conflicts-with-other-babel-plugins*/}
 
-Some Babel plugins may conflict with React Compiler:
+قد تتعارض بعض إضافات Babel مع React Compiler:
 
-1. Place `babel-plugin-react-compiler` early in your plugin list
-2. Disable conflicting optimizations in other plugins
-3. Test your build output thoroughly
+1. ضع `babel-plugin-react-compiler` مبكراً في قائمة الإضافات
+2. عطّل تحسينات متعارضة في إضافات أخرى
+3. اختبر مخرجات البناء بدقة
 
-### Runtime module not found {/*runtime-module-not-found*/}
+### وحدة التشغيل غير موجودة {/*runtime-module-not-found*/}
 
-If users see "Cannot find module 'react-compiler-runtime'":
+إذا رأى المستخدمون «Cannot find module 'react-compiler-runtime'»:
 
-1. Ensure the runtime is listed in `dependencies`, not `devDependencies`
-2. Check that your bundler includes the runtime in the output
-3. Verify the package is published to npm with your library
+1. تأكد أن التشغيل في `dependencies` وليس `devDependencies`
+2. تحقق أن المُجمّع يضمّن التشغيل في المخرجات
+3. تأكد أن الحزمة منشورة على npm مع مكتبتك
 
-## Next Steps {/*next-steps*/}
+## الخطوات التالية {/*next-steps*/}
 
-- Learn about [debugging techniques](/learn/react-compiler/debugging) for compiled code
-- Check the [configuration options](/reference/react-compiler/configuration) for all compiler options
-- Explore [compilation modes](/reference/react-compiler/compilationMode) for selective optimization
+- تعرّف على [تقنيات التصحيح](/learn/react-compiler/debugging) للشيفرة المُجمَّعة
+- راجع [خيارات الإعداد](/reference/react-compiler/configuration) لكل خيارات المُصرّف
+- استكشف [أوضاع التجميع](/reference/react-compiler/compilationMode) للتحسين الانتقائي