Crear aplicaciones de barra de herramientas para desarrollo

Astro incluye una barra de herramientas de desarrollo que puedes usar para inspeccionar tu sitio, comprobar la accesibilidad y problemas de rendimiento, y más. Esta barra puede ser extendida con aplicaciones personalizadas.

Construir una aplicación de barra de herramientas para desarrollo motivacional

En esta receta, aprenderás como crear una barra de herramienta de desarrollo que te ayuda a estar motivado mientras estás trabajando en tu sitio. Esta aplicación mostrará un mensaje motivacional cada vez que lo actives.

¿Quieres comenzar rápidamente? Comienza tu aplicación creando un proyecto nuevo con AStro usando la plantilla toolbar-app.

npm create astro@latest -- --template toolbar-app

pnpm create astro -- --template toolbar-app

yarn create astro -- --template toolbar-app

O, sigue leyendo para aprender como construir la aplicación desde cero.

Creando la integración con Astro

Las aplicaciones de barra de herramientas para desarrollo sólo pueden ser agregadas por las integraciones de Astro usando el hook astro:config:setup. Necesitarás crear la aplicación de barra de herramientas y la integración que agregará la barra de herramientas a tu proyecto de Astro existente.

En la raíz de tu proyecto Astro, crea un nuevo directorio llamado my-toolbar-app/ para tu aplicación y archivos de integración. Crea dos nuevos archivos en este directorio: app.ts y my-integration.ts.
- Directorymy-toolbar-app/
  - app.ts
  - my-integration.ts
- Directorysrc/
  - Directorypages/
    …
  - …
- astro.config.mjs
- package.json
- tsconfig.json

En my-integration.ts, agrega el siguiente código para proveer el nombre de tu integración y la función addDevToolbarApp() que añadirá tu aplicación de barra de herramientas con el hook astro:config:setup:

import { fileURLToPath } from 'node:url';
import type { AstroIntegration } from 'astro';

export default {
  name: 'my-astro-integration',
  hooks: {
    'astro:config:setup': ({ addDevToolbarApp }) => {
      addDevToolbarApp({
        id: "my-toolbar-app",
        name: "My Toolbar App",
        icon: "🚀",
        entrypoint: fileURLToPath(new URL('./app.ts', import.meta.url))
      });
    },
  },
} satisfies AstroIntegration;

Para usar esta integración en tu proyecto, agrégala al array integrations en tu archivo astro.config.mjs.

import { defineConfig } from 'astro/config';
import myIntegration from './my-toolbar-app/my-integration.ts';

export default defineConfig({
  integrations: [myIntegration],
})

Si aún el servidor de desarrollo no está corriendo, inícialo. Si la integración ha sido exitosamente añadida a tu proyecto, deberías ver una nueva aplicación “undefined” en la barra de herramientas de desarrollo.

Pero, también verás un mensaje de error de que tu aplicación de barra de herramientas de desarrollo ha fallado al cargar. Esto es porque aún no has creado la aplicación. Lo haremos en la siguiente sección.

Mira la documentación de la API de integración de Astro para más información sobre como construir integraciones en Astro.

Creando la aplicación

Las aplicaciones de barra de herramientas para desarrollo son definidas usando la función defineToolbarApp() del módulo astro/toolbar. Esta función toma un objeto con una función init() que será llamada cuando la aplicación de barra de herramientas para desarrollo es cargada.

Esta función init() contiene la lógica de tu aplicación para renderizar los elementos en la pantalla, enviar y recibir eventos del lado del cliente de la barra de desarrollo, y comunicarse con el servidor.

import { defineToolbarApp } from "astro/toolbar";

export default defineToolbarApp({
    init(canvas, app, server) {
      // ...
    },
});

Para mostrar mensajes motivacionales en la pantalla, utilizarás la propiedad canvas para acceder a un ShadowRoot estándar. Los elementos pueden ser creados y agregados al ShadowRoot utilizando las API estándar del DOM.

Copia el siguiente código en my-toolbar-app/app.ts. Este código provee una lista de mensajes motivacionales, y la lógica para crear un nuevo elemento <h1> con un mensaje aleatorio.

import { defineToolbarApp } from "astro/toolbar";

const motivationalMessages = [
  "¡Lo estás haciendo genial!",
  "¡Sigue trabajando así!",
  "¡Eres increíble!",
  "¡Eres una estrella!",
];

export default defineToolbarApp({
    init(canvas) {
      const h1 = document.createElement('h1');
      h1.textContent = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)];

      canvas.append(h1);
    },
});

Inicia el servidor si aún no está corriendo y activa la aplicación en la barra de herramientas de desarrollo. Si tu aplicación funciona correctamente, verás un mensaje motivacional en la parte superior izquierda de tu pantalla. (Y, ¡tienen razón!)

Sin embargo, este mensaje no cambiará cuando la aplicación se activa y desactiva consecutivamente, puesto que la función init() es llamada solamente cuando la aplicación es cargada.

Para agregar interactividad desde el lado del cliente a tu aplicación, agrega el argumento app y utiliza onAppToggled() para seleccionar un nuevo mensaje aleatorio cada vez que tu aplicación de barra de herramientas es activada.

import { defineToolbarApp } from "astro/toolbar";

const motivationalMessages = [
  "¡Lo estás haciendo genial!",
  "¡Sigue trabajando así!",
  "¡Eres increíble!",
  "¡Eres una estrella!",
];

export default defineToolbarApp({
    init(canvas, app) {
      const h1 = document.createElement('h1');
      h1.textContent = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)];

      canvas.append(h1);

      // Mostrar un mensaje aleatorio cuando la aplicación es activada
      app.onToggled(({ state }) => {
        const newMessage = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)];
        h1.textContent = newMessage;
      });
    },
});

En la vista previa de tu navegador, activa y desactiva tu aplicación consecutivamente algunas veces. Con este cambio, un nuevo mensaje se seleccionará cada vez que tu aplicación sea activada, dándote una fuente infinita de motivación.

Mira la documentación de la API de aplicaciones de barra de herramientas para desarrollo para más información sobre como construir aplicaciones de barra de herramientas para desarrollo.

Crear un problema en GitHub