@astrojs/ solid-js

v4.4.1 GitHub npm Changelog

Diese Astro-Integration erlaubt dir serverseitiges Rendering und clientseitige Hydratation von deinen SolidJS-Komponenten.

Installation

Astro verfügt über einen astro add-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die Integrationen auch manuell installieren.

Um @astrojs/solid-js zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus.

npx astro add solid

pnpm astro add solid

yarn astro add solid

Sollten dir dabei Probleme begegnen, melde sie gerne bei uns auf GitHub und versuche stattdessen die manuelle Installation.

Manuelle Installation

Installiere zuerst das @astrojs/solid-js-Paket:

npm install @astrojs/solid-js

pnpm add @astrojs/solid-js

yarn add @astrojs/solid-js

Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung “Cannot find package ‘solid-js’” (oder eine ähnliche Meldung) erhältst, musst du SolidJS manuell installieren:

npm install solid-js

pnpm add solid-js

yarn add solid-js

Wende dann die Integration auf die Datei astro.config.* an, indem du die Eigenschaft integrations verwendest:

import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // ...
  integrations: [solid()],
});

Erste Schritte

Um deine ersten SolidJS-Komponenten in Astro zu verwenden, gehe zu unserer UI-Framework Dokumentation. Dort lernst du:

📦 wie Framework-Komponenten geladen werden,
💧 clientseitige Hydratationsoptionen, und
🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen

Optionen

Kombination mehrerer JSX-Frameworks

Wenn du verschiedene JSX-Frameworks (React, Preact, Solid) im gleichen Projekt verwendest, muss Astro bestimmen, welche JSX-Framework-spezifischen Transformationen für jede deiner Komponenten verwendet werden sollen. Wenn du nur eine JSX-Framework-Integration zu deinem Projekt hinzugefügt hast, ist keine weitere Konfiguration nötig.

Verwende dazu die include (erforderlich) und exclude (optional) Konfigurationsoption, um zu spezifizieren, welche Dateien zu welchem Framework gehören. Stelle dazu ein Array aus Dateien und/oder Verzeichnissen in der include-Option für jedes Framework, das du nutzt, bereit. Zudem können auch Wildcards verwendet werden, um mehrere Dateipfade anzugeben.

import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // Aktiviere viele Frameworks, um alle Arten von Komponenten zu unterstützen.
  // Wenn du nur ein JSX-Framework verwendest, ist `include` nicht notwendig.
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});

Konfiguration

devtools

Hinzugefügt in: @astrojs/solid-js@4.2.0

Du kannst die Solid-DevTools während des Programmierens verwenden, indem du ein Objekt mit devtools: true in die Konfiguration der solid()-Integration hinzufügst und das solid-devtools-Paket zu deinem Projekt hinzufügst:

npm install solid-devtools

pnpm add solid-devtools

yarn add solid-devtools

import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // ...
  integrations: [solid({ devtools: true })],
});

Anwendung

Du kannst SolidJS-Komponenten wie jede andere UI-Framework-Komponenten verwenden.

Suspense-Grenzen

Um Solid Resources und Lazy-Komponenten ohne übermäßige Konfiguration zu unterstützen, werden reine Server- und Hydratation-Komponenten automatisch in Suspense-Grenzen auf der höchsten Ebene eingeschlossen und auf dem Server mithilfe von renderToStringAsync-Funktion dargestellt. Daher musst du asynchrone Komponenten nicht in Suspense-Grenzen umwickeln.

Zum Beispiel kannst du Solids createResource verwenden, um asnychron Daten von einem Server zu holen. Diese Daten werden im initialen, server-gerenderten HTML von Astro inkludiert sein:

function CharacterName() {
  const [name] = createResource(() =>
    fetch('https://swapi.dev/api/people/1')
      .then((result) => result.json())
      .then((data) => data.name)
  );

  return (
    <>
      <h2>Name:</h2>
      {/* Luke Skywalker */}
      <div>{name()}</div>
    </>
  );
}