Dev Toolbar App API

Astro Dev Toolbar App API позволяет создавать интеграции Astro, которые добавляют собственные приложения в панель инструментов разработчика. Это удобно для внедрения новых функций или связи со сторонними сервисами.

Настройка интеграции

Интеграции добавляют приложения через хук astro:config:setup:

my-integration.js

export default () => ({
  name: "my-integration",
  hooks: {
    "astro:config:setup": ({ addDevToolbarApp }) => {
      addDevToolbarApp({
        id: "my-app",
        name: "Моё приложение",
        icon: "<svg>...</svg>",
        entrypoint: "./my-app.js",
      });
    },
  },
});

addDevToolbarApp()

Функция для регистрации приложения. Принимает объект с полями:

• id: уникальный идентификатор.
• name: отображаемое название.
• entrypoint: путь к файлу приложения.
• icon: SVG-иконка (опционально).

Структура приложения

Приложение — это файл, который экспортирует объект через defineToolbarApp():

src/my-app.js

import { defineToolbarApp } from "astro/toolbar";

export default defineToolbarApp({
  init(canvas, app, server) {
    const text = document.createTextNode('Привет, мир!');
    canvas.appendChild(text);
  },
  beforeTogglingOff() {
    return window.confirm('Вы уверены, что хотите выйти?');
  }
});

init()

Вызывается один раз при загрузке приложения. Аргументы:

• canvas: ShadowRoot для отрисовки вашего UI.
• app: объект для работы с клиентскими событиями.
• server: объект для связи с бэкендом (через Vite).

Библиотека компонентов

В панель инструментов включен набор готовых веб-компонентов для сохранения единого стиля:

• <astro-dev-toolbar-window>: окно.
• <astro-dev-toolbar-button>: кнопка.
• <astro-dev-toolbar-badge>: бейдж.
• <astro-dev-toolbar-toggle>: переключатель.
• <astro-dev-toolbar-tooltip>: подсказка.
• <astro-dev-toolbar-highlight>: подсветка элемента на странице.