Astro: la sintassi

La sintassi di Astro è un superset di HTML. Ciò vuol dire che basta conoscere il linguaggio di mark-up per essere in grado di creare un componente con questo framework JavaScript.

Come anticipato nel precedente capitolo, ogni componente di Astro si compone di due sezioni che sono lo script del componente e il template.

Script e template dei componenti Astro

Lo script è racchiuso tra due delimitatori di codice (---) che contrassegnano quello che viene anche definito frontmatter. Qui è possibile importare componenti esterni, dichiarare variabili e creare la logica del componente. Ecco un esempio di frontmatter:

---
const msg = "Hello world";
const fruits = ["Apple", "Peach", "Pear"];
---

La parte sottostante è il template del componente, costituito da codice HTML e espressioni JavaScript. La sintassi utilizzata nel template è simile a quella di JSX, ma è importante notare che i valori inseriti nel codice, sebbene dinamici, non sono reattivi. I componenti di Astro, infatti, vengono eseguiti una sola volta al momento del rendering. Ecco un esempio di script e template insieme:

---
const msg = "Hello world";
---
<div>
  <p>{ msg }!</p>
</div>

Ma non si è limitati a valori statici. Nell'esempio che segue, vengono generati dinamicamente gli elementi di una lista:

---
const fruits = ["Apple", "Peache", "Pear"];
---
<ul>
  { fruits.map( (fruit) => (
    <li>{ fruit }</li>
  ) ) }
</ul>

Operatori e e variabili

È anche possibile utilizzare operatori di confronto. Di seguito utilizziamo una valutazione a corto circuito:

---
const displayText = true;
---
{ displayText && <p>Hello world!</p> }

Nell'esempio che segue viene utilizzato l'operatore ternario:

---
const displayText = true;
---
{ displayText ? <p>Hello world!</p> : <p>Nothing to see here.</p> }

È possibile utilizzare le variabili per generare tag dinamici:

---
const Element = 'h2';
---
<Element>Hello world!</Element>

Nel codice qui sopra viene generato un elemento h2, ma possiamo anche generare dinamicamente il nome di un componente:

---
import MyComponent from "./MyComponent.astro";
const Component = MyComponent;
---
<Component />

Si noti che, con i tag dinamici, i nomi delle variabili devono iniziare con lettera maiuscola. Inoltre, i componenti dinamici non sono compatibili con le direttive di idratazione.

Differenze tra Astro e JSX

Sebbene i due linguaggi abbiamo una sintassi molto simile, esistono alcune differenze significative tra Astro e JSX. Innanzitutto, Astro supporta il formato standard kebab-case (con i trattini) per i nomi degli attributi, invece che il tipico camel case di JSX:

<div data-index-number={id}>
	<h2>Welcome {name}</h2>
	<img
		class="card"
		src={avatar}
		alt={name}
	/>
	<p>Description: {description}.</p>
</div>

Astro supporta più elementi root nello stesso template, quindi non è necessario racchiudere più elementi nello stesso container. In JSX è invece necessario racchiudere blocchi di elementi in un Fragment (<>...</>).

In Astro si utilizza l'attributo class per assegnare classi ad un elemento HTML, mentre in JSX si usa className.

Infine, a differenza di JSX, Astro supporta i commenti sia in formato HTML che JS, con la sola differenza che i primi verranno renderizzati nell'HTML, mentre i secondi saranno eliminati durante il rendering.