Плагины и расширения

Petite-Vue — это облегчённая реактивная библиотека, созданная для упрощённого управления состоянием и динамическим обновлением интерфейса. Несмотря на минималистичный размер, она поддерживает расширяемость через плагины и сторонние модули, что позволяет интегрировать дополнительные возможности без увеличения базового ядра.

Механизм плагинов

В отличие от Vue 3, Petite-Vue не имеет полноценной системы плагинов, но поддерживает подключение функциональности через инициализаторы и расширения реактивных объектов. Основной механизм заключается в следующем:

Инициализация с кастомными функциями. Petite-Vue позволяет передавать объект с методами при запуске приложения через createApp или при использовании директив v-scope.
```
import { createApp } from 'petite-vue';

const loggerPlugin = {
  log(message) {
    console.log(`[Logger]: ${message}`);
  }
};

const app = createApp({
  count: 0,
  increment() {
    this.count++;
    this.log(`Count: ${this.count}`);
  }
});

Object.assign(app, loggerPlugin);
app.mount();
```
В этом примере объект loggerPlugin добавляет метод log ко всему приложению. Такой подход позволяет расширять функциональность без изменения ядра Petite-Vue.
Расширение реактивных данных. Petite-Vue использует reactive объекты для отслеживания изменений. Можно создавать свои функции и связывать их с реактивными свойствами.
```
const state = reactive({ value: 10 });

function doubleValue() {
  return state.value * 2;
}

watchEffect(() => {
  console.log(`Двойное значение: ${doubleValue()}`);
});
```
Любые функции, зависящие от реактивных данных, автоматически будут обновляться при изменении состояния, что позволяет интегрировать плагины для вычислений, валидаций или логирования.

Создание пользовательских директив

Petite-Vue поддерживает кастомные директивы, которые расширяют возможности работы с DOM. Синтаксис простой и позволяет внедрять новые атрибуты с реактивной логикой.

createApp({
  count: 0
}).directive('focus-on', (el, value) => {
  if (value) el.focus();
}).mount();

Ключевые особенности пользовательских директив:

Реактивность: директива автоматически реагирует на изменения переданного значения.
Простая интеграция: нет необходимости в сложной регистрации; директива привязывается к экземпляру приложения.
Возможность использования в сторонних плагинах: пользовательские пакеты могут включать набор директив для повторного использования.

Подключение внешних библиотек

Petite-Vue легко интегрируется с существующими JS-библиотеками благодаря минимальной зависимости от DOM. Основные способы:

Прямое использование функций библиотеки внутри методов приложения:

import dayjs from 'dayjs';

createApp({
  now: dayjs(),
  updateTime() {
    this.now = dayjs();
  }
}).mount();

Инкапсуляция сторонней библиотеки в плагин:

const datePlugin = {
  format(date, formatStr = 'YYYY-MM-DD') {
    return dayjs(date).format(formatStr);
  }
};

const app = createApp({
  today: new Date()
});

Object.assign(app, datePlugin);
app.mount();

Такой подход позволяет создавать собственные расширения, которые легко подключать к разным проектам.

Реактивные расширения и миксины

Хотя Petite-Vue не поддерживает полноценные миксины как Vue 2, можно реализовать миксины через объединение объектов:

const counterMixin = {
  count: 0,
  increment() {
    this.count++;
  }
};

const app = createApp({
  ...counterMixin,
  reset() {
    this.count = 0;
  }
}).mount();

Объединение объектов позволяет разделять логику на модули.
Реактивность сохраняется, так как все свойства остаются частью реактивного объекта приложения.
Этот подход облегчает тестирование и повторное использование функциональности.

Экосистема и расширения

Несмотря на лёгкость Petite-Vue, сообщество создаёт мини-библиотеки и плагины, расширяющие функционал:

Сторонние директивы: управление фокусом, маски ввода, анимации при появлении элементов.
Компонентные библиотеки: небольшие UI-компоненты с минимальной зависимостью.
Интеграция с состоянием: обёртки для локального хранилища, синхронизации с сервером или websocket.

Главная задача таких расширений — добавление полезного функционала без утяжеления ядра, сохраняя принцип «легковесного реактивного фреймворка».