السكربتات والجزر

سكربت الصفحة مش إطار

<script> جوّه .astro بيتجمع ويتحط type="module" ويتبعت مرة حتى لو المكوّن اتكرر. ده مكان القائمة البسيطة، تتبع النقرة، أو تشغيل عنصر من غير React.

<span id="n">٠</span><button id="add">زود</button><script>  const btn = document.getElementById("add");  const n = document.getElementById("n");  let v = 0;  btn?.addEventListener("click", () => {    v += 1;    if (n) n.textContent = String(v);  });</script>

لو المكوّن اتكرر في الصفحة، الـ id هيتكرر والسكربت هيمسك أول واحد بس. للجزر المتكررة استخدم مكوّن إطار، أو امسح الـ id ولف على العناصر بكلاس.

is:inline يسيّب السكربت زي ما هو: مش هيتجمع، ومش هيتمسح تكراره، ومينفعش يعمل import. مناسب لسكربت طرف تالت لازم يفضل سطره كما هو.

define:vars يمرّر قيم من السيرفر للسكربت. القيم لازم تتسلسل (نص، رقم، كائن بسيط). متبعتش دالة ولا عنصر DOM.

امتى الجزيرة تصحى

مكوّن React أو Vue أو Svelte من غير directive = HTML فقط. الـ directive يقول امتى الجافاسكربت ينزل ويصحّي المكوّن (hydration).

التركيب: pnpm astro add react (أو vue أو svelte أو solid أو preact). الأمر بيسطّب الحزمة ويكتب التكامل في الكونفج. الـ props اللي بتعدّي للجزيرة لازم تتسلسل JSON. مفيش دوال ولا كلاس.

---import Cart from "../components/Cart.jsx";---<h1>المنيو</h1><Cart client:visible dish="كشري" price={25} />

حالة بين جزيرتين

كل جزيرة بتصحى لوحدها. مش بيشاركوا state زي شجرة React واحدة. لو السلة والعداد محتاجين نفس الرقم، إما تجمعهم في جزيرة واحدة، أو مكتبة حالة صغيرة بتشتغل بره الإطار (زي nanostores) يقرأوا منها الاتنين. متصحّيش الصفحة كلها عشان زرارين يتكلموا.

خلّصت الفصل لما

• تفرّق <script> المجمّع عن is:inline
• تختار directive مناسب مش client:load للكل
• تعرف إن client:only محتاج اسم الإطار
• متبعتش دالة في props جزيرة
• لو جزيرتين محتاجين نفس الحالة، تجمعهم أو تستخدم store مشترك