@astrojs/ solid-js

v7.0.0 GitHub npm Registro de cambios

Esta integración de Astro habilita el renderizado y la hidratación del lado del cliente para tus componentes de SolidJS.

Instalación

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

Para instalar @astrojs/solid-js, ejecuta lo siguiente desde el directorio de tu proyecto y sigue las instrucciones:

npx astro add solid

pnpm astro add solid

yarn astro add solid

Si tienes algún problema, no dudes en informarnos en GitHub e intenta los pasos de instalación manual a continuación.

Instalación manual

Primero, instala el paquete @astrojs/solid-js:

npm install @astrojs/solid-js

pnpm add @astrojs/solid-js

yarn add @astrojs/solid-js

La mayoría de los gestores de paquetes también instalarán las dependencias peer asociadas. Si ves una advertencia Cannot find package 'solid-js' (o similar) al iniciar Astro, necesitarás instalar SolidJS:

npm install solid-js

pnpm add solid-js

yarn add solid-js

Luego, aplica la integración a tu archivo astro.config.* usando la propiedad integrations:

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

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

Y añade el siguiente código al archivo tsconfig.json.

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

Primeros pasos

Para usar tu primer componente de SolidJS en Astro, dirígete a nuestra documentación de frameworks de UI. Explorarás:

📦 cómo se cargan los componentes del framework,
💧 opciones de hidratación del lado del cliente, y
🤝 oportunidades para mezclar y anidar frameworks juntos

Configuración

`devtools`

Type: boolean

Añadido en: @astrojs/solid-js@4.2.0

Puedes habilitar Solid DevTools en desarrollo pasando un objeto con devtools: true a la configuración de tu integración solid() y añadiendo solid-devtools a las dependencias de tu proyecto:

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 })],
});

Opciones

Combinar múltiples frameworks JSX

Cuando estás utilizando múltiples frameworks JSX (React, Preact, Solid) en el mismo proyecto, Astro necesita determinar qué transformaciones específicas de cada framework JSX deben utilizarse para cada uno de tus componentes. Si solo has añadido una integración de interfaz de usuario de framework JSX a tu proyecto, no se necesita configuración adicional.

Usa las opciones de configuración include (obligatoria) y exclude (opcional) para especificar qué archivos pertenecen a qué framework. Proporciona un array de archivos y/o carpetas a include para cada framework que estés utilizando. Se pueden utilizar comodines para incluir múltiples rutas de archivos.

Recomendamos colocar los componentes comunes del framework en la misma carpeta (por ejemplo, /components/react/ y /components/solid/) para facilitar la especificación de tus inclusiones, pero esto no es obligatorio:

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({
  // Enable many frameworks to support all different kinds of components.
  // No `include` is needed if you are only using a single JSX framework!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*', '**/node_modules/@suid/material/**'],
    }),
  ],
});

Uso

Usa un componente de SolidJS como lo harías con cualquier componente de framework de UI.

Límites de Suspense

Para soportar Solid Resources y Lazy Components sin configuración excesiva, los componentes solo de servidor y los que se hidratan se envuelven automáticamente en límites de Suspense de nivel superior y se renderizan en el servidor usando la función renderToStringAsync. Por lo tanto, no necesitas añadir un límite de Suspense de nivel superior alrededor de los componentes asíncronos.

Por ejemplo, puedes usar createResource de Solid para obtener datos remotos asíncronos en el servidor. Los datos remotos se incluirán en el HTML renderizado inicialmente por el servidor de Astro:

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>
    </>
  );
}