Astro 5.5 arbeitet am Zusammenspiel mit Diagramm-Werkzeugen

Astro 5.5 ist erschienen. Im neuen Release bietet das JavaScript-Webframework unter anderem einen verbesserten Support für Diagramm-Tools und verstärkte Typsicherheit. Hinter einem experimentellen Flag verbirgt sich ein neues Feature für den Umgang mit Tags, das künftig zum Standard werden soll.

Diagramm-Tools in Astro verwenden: Mermaid, D2 & Co.

Bisher war das Verwenden von Tools wie Mermaid und D2, die das Definieren von Diagrammen in Codeblöden in Markdown und deren anschließendes Rendern innerhalb des Inhalts erlauben, in Astro nicht ohne Weiteres möglich. Das Syntax-Highlighting, das in Astro standardmäßig genutzt wird, stand nämlich dem Rendern der Codeblöcke im Weg, wie das Entwicklungsteam ausführt.

Aus diesem Grund bringt Astro 5.5 die neue Option excludeLangs in der Markdown-Konfiguration mit, um das Syntax-Highlighting für spezifische Sprach-Codeblöcke zu überspringen. In den übrigen Codeblöcken bleibt das Syntax-Highlighting dagegen bestehen.

Das Astro-Team zeigt das anhand eines Beispiels: Hier ist das Highlighting für die Sprache mermaid deaktiviert, nachdem das rehype-mermaid-Plug-in installiert wurde. Dieses Plug-in dient dem Rendern von Mermaid-Diagrammen.

import { defineConfig } from 'astro/config';
import rehypeMermaid from 'rehype-mermaid';

export default defineConfig({
  markdown: {
    syntaxHighlight: {
      type: 'shiki',
      excludeLangs: ['mermaid', 'math'],
    },
    rehypePlugins: [rehypeMermaid],
  },
});

Dann lassen sich Diagramme direkt innerhalb des Markdown-Inhalts erstellen, die auf der Webseite als Diagramm gerendert werden:

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

Lesen Sie auch

Textbasierte Werkzeuge für Entwickler im Vergleich: Von Code zu Diagrammen

Typsicherheit für Session-Daten

Das neue Release ermöglicht darüber hinaus TypeScript-Typisierung für Session-Daten, um any-Fehler zu vermeiden. Bereits seit Astro 5.1 ist experimenteller Support für die Session-Speicherung enthalten, aber die Session-Daten waren bisher untypisiert. Nun können Developer die Typen der Session-Daten definieren, indem sie das globale App.SessionData-Interface in der src/env.d.ts-Datei eines Projekts erweitern:

declare namespace App {
  interface SessionData {
    user: {
      id: string;
      email: string;
    };
    lastLogin: Date;
  }
}

Dieses optionale Feature soll dazu beitragen, Fehler bereits zur Entwicklungszeit, statt erst zur Laufzeit zu erkennen.

Neues Feature in den Startlöchern: Tag-Reihenfolge beibehalten

Eine Funktion im Umgang mit Tags soll in Astro künftig zum Standard werden und ist derzeit noch hinter einem Flag verborgen: experimental.preserveScriptOrder. Dann generiert Astro Styles und Skripte in der Reihenfolge, in der sie definiert wurden.

Bislang ist es standardmäßig so, dass Astro beim Rendern mehrerer <style>- und <script>-Tags auf der gleichen Seite ihre Reihenfolge im generierten HTML-Output umkehrt. Das kann zu unerwarteten Ergebnissen führen, beispielsweise das Überschreiben von CSS-Styles durch frühere Style-Tags.

Entwicklerinnen und Entwickler, die ihren Code an dieses Verhalten angepasst haben, müssen ihn unter Umständen für das Verwenden mit dem neuen Verhalten ändern, wenn dieses zum Standard wird. Durch das experimentelle Flag bietet das Astro-Team ihnen bereits jetzt die Möglichkeit, die Auswirkungen auf ihren Code zu testen.

Diese und weitere Neuerungen in Version 5.5 behandelt ein Astro-Blogeintrag im Detail.

JavaScript-Konferenz von Heise: enterJS 2025

Die enterJS 2025 findet am 7. und 8. Mai in Mannheim statt. Die Konferenz bietet einen umfassenden Blick auf die JavaScript-gestützte Enterprise-Welt. Der Fokus liegt nicht nur auf den Programmiersprachen JavaScript und TypeScript selbst, sondern auch auf Frameworks und Tools, Accessibility, Praxisberichten, UI/UX und Security.

Highlights aus dem Programm:

• Islands Architecture mit Astro
• 4 kritische Antipatterns in der React/TypeScript-Entwicklung
• Hands-on-Workshop: Eigene KI-Agenten mit LangChain.js & LangGraph.js (Workshop, 6. Mai)

Tickets sind zum Frühbucherpreis im Online-Shop erhältlich.

(mai)