Публикация плагинов

Fresh — это современный фреймворк для разработки веб-приложений на JavaScript и TypeScript, построенный на Deno. Он ориентирован на высокую производительность, минимизацию лишнего кода на клиенте и использование нативных возможностей серверного рендеринга. Основной принцип Fresh — компоненты рендерятся на сервере и доставляются в браузер уже готовыми, без необходимости полноценного клиентского JavaScript.

Архитектура Fresh

Архитектура Fresh строится вокруг следующих ключевых элементов:

  • Серверные рендеринг-компоненты (Server Components). Все компоненты рендерятся на сервере и отправляются на клиент как HTML. Это снижает нагрузку на клиент и ускоряет загрузку страницы.
  • Ограниченный клиентский JavaScript. Fresh использует принцип «Zero JS runtime by default», то есть по умолчанию на клиенте нет лишнего JavaScript, кроме тех компонентов, которые явно требуют интерактивности.
  • Маршрутизация через файловую структуру. Каждый файл в папке routes автоматически становится маршрутом, что упрощает настройку путей и работу с URL.
  • Гибкая работа с данными. Fresh использует функцию handler для обработки запросов на сервере, что позволяет легко интегрировать API и работать с базой данных.

Плагины и их роль

Плагины в Fresh — это механизм расширения функциональности приложения без изменения ядра фреймворка. Они позволяют:

  • Добавлять поддержку новых форматов данных.
  • Интегрировать сторонние сервисы.
  • Автоматизировать процессы сборки и деплоя.

Плагины могут модифицировать рендеринг, влиять на сборку проекта, а также расширять возможности маршрутов.

Создание плагина

  1. Структура плагина

    Плагин — это модуль, экспортирующий объект с обязательными свойствами:

    export default {
  name: "plugin-name",
  setup(app) {
    // Логика инициализации плагина
  },
};

    Основные ключи объекта:

    • name — уникальный идентификатор плагина.
    • setup — функция инициализации, принимает объект приложения и позволяет добавлять middleware, хуки или изменять конфигурацию сборки.

  2. Регистрация плагина

    Плагины подключаются через конфигурационный файл fresh.config.ts:

    import pluginExample from "./plugins/pluginExample.ts";

export default {
  plugins: [pluginExample],
};

    Fresh автоматически вызовет функцию setup каждого подключенного плагина при запуске сервера или сборке проекта.

  3. Доступ к контексту приложения

    Контекст приложения (app) предоставляет следующие возможности:

    • Добавление middleware для маршрутов.
    • Настройка серверного рендеринга.
    • Подключение кастомных обработчиков запросов.

    Пример использования:

    export default {
  name: "logger-plugin",
  setup(app) {
    app.use(async (ctx, next) => {
      console.log(`${ctx.request.method} ${ctx.request.url}`);
      await next();
    });
  },
};

Хуки плагинов

Fresh поддерживает хуки, которые позволяют вмешиваться в процесс рендеринга и обработки запросов:

  • beforeRender — вызывается перед генерацией HTML.
  • afterRender — вызывается после генерации HTML, перед отправкой клиенту.
  • onRequest — перехватывает все входящие HTTP-запросы.

Пример хуков в плагине:

export default {
  name: "hook-example",
  setup(app) {
    app.hooks.beforeRender((ctx, component) => {
      component.props.timestamp = Date.now();
    });

    app.hooks.afterRender((ctx, html) => {
      return html.replace("</body>", `<footer>Сборка: ${Date.now()}</footer></body>`);
    });
  },
};

Публикация плагинов

Плагины Fresh распространяются как стандартные модули Deno. Для публикации:

  1. Разместить плагин в отдельном репозитории с корректным mod.ts или index.ts.
  2. Обеспечить версионирование через теги Git, например v1.0.0.
  3. Предоставить документацию с примерами подключения и использования.

Для интеграции плагина достаточно указать URL модуля в массиве plugins:

export default {
  plugins: [
    "https://deno.land/x/fresh_plugins/logger@v1.0.0/mod.ts"
  ],
};

Лучшая практика разработки плагинов

  • Минимизировать влияние на ядро приложения.
  • Использовать строгую типизацию TypeScript для экспорта функций и объектов.
  • Документировать все хуки и методы плагина.
  • Стараться создавать плагин как независимый модуль, легко переносимый между проектами.

Плагины в Fresh — мощный инструмент для расширения функциональности приложений, позволяющий создавать модульные, масштабируемые решения с высокой производительностью и минимальной нагрузкой на клиентскую часть.

Оглавление