Перейти к основному содержимому

🎮 Рабочие примеры

Попробуйте Form Guardian в действии! Все примеры размещены на GitHub и могут быть запущены локально.

📦 Репозиторий​

Все примеры доступны в нашем GitHub репозитории:

github.com/Tishkin/form-guardian-examples

Каждый пример запускается независимо и демонстрирует реальные паттерны использования.

🚀 Быстрый старт​

# Клонировать репозиторий
git clone https://github.com/Tishkin/form-guardian-examples.git
cd form-guardian-examples

# Установить зависимости
pnpm install

# Запустить все примеры сразу
pnpm dev:all

# Или запустить конкретный пример
pnpm dev:react     # Порт 3001
pnpm dev:nextjs    # Порт 3005
pnpm dev:vue       # Порт 3002
pnpm dev:svelte    # Порт 3003
pnpm dev:angular   # Порт 4200
pnpm dev:vanilla   # Порт 3004

⚛️ Примеры React​

Порт: 3001
Путь: examples/react

Что включено:​

  1. Интеграция React Hook Form

    • Контролируемые формы с валидацией
    • Автовосстановление с setValue
    • Индикатор статуса черновика
    • Очистка черновиков при отправке

  2. Интеграция Formik

    • Синхронизация значений Formik
    • Кастомная логика восстановления
    • Автосохранение с учетом валидации

  3. Обычные React формы

    • Неконтролируемые компоненты
    • Интеграция на основе ref
    • Минимальная настройка

Запустить:

pnpm dev:react
# Открыть http://localhost:3001

🔷 Примеры Next.js​

Порт: 3005
Путь: examples/nextjs

Что включено:​

  1. App Router (Next.js 13+)

    • Клиентские компоненты с 'use client'
    • SSR-совместимая настройка
    • Формы для конкретных маршрутов

  2. Интеграция Server Components

    • Компоненты форм на клиенте
    • Загрузка данных в серверных компонентах
    • Автосохранение безопасное для гидратации

Запустить:

pnpm dev:nextjs
# Открыть http://localhost:3005

📄 Примеры Vanilla JavaScript​

Порт: 3004
Путь: examples/vanilla

Что включено:​

  1. Чистый HTML/JS

    • Фреймворк не требуется
    • Прямая работа с DOM
    • ES модули

  2. Многошаговая форма

    • Форма в стиле wizard
    • Черновик сохраняется между шагами
    • Отслеживание прогресса

Запустить:

pnpm dev:vanilla
# Открыть http://localhost:3004

💚 Примеры Vue.js​

Порт: 3002
Путь: examples/vue

Что включено:​

  1. Vue 3 Composition API

    • setup() с refs
    • Интеграция lifecycle hooks
    • Реактивный статус черновика

  2. Vue 3 Options API

    • Традиционный синтаксис Vue
    • Component lifecycle
    • Подход на основе методов

Запустить:

pnpm dev:vue
# Открыть http://localhost:3002

🔥 Примеры Svelte​

Порт: 3003
Путь: examples/svelte

Что включено:​

  1. Интеграция SvelteKit

    • Form actions
    • Load functions
    • Progressive enhancement

  2. Svelte Stores

    • Состояние на основе store
    • Реактивный индикатор черновика
    • Store subscriptions

Запустить:

pnpm dev:svelte
# Открыть http://localhost:3003

🅰️ Примеры Angular​

Порт: 4200
Путь: examples/angular

Что включено:​

  1. Reactive Forms

    • Интеграция FormBuilder
    • Автосохранение FormControl
    • Учет валидации

  2. Template-Driven Forms

    • Подход NgModel
    • Доступ ViewChild ref
    • Change detection

Запустить:

pnpm dev:angular
# Открыть http://localhost:4200

🎯 Общие демонстрируемые функции​

Все примеры демонстрируют:

✅ Автоматическое сохранение - Сохранение при вводе
✅ Восстановление черновиков - Восстановление при загрузке
✅ Управление черновиками - Очистка, проверка статуса
✅ Blacklist/Whitelist - Исключение конкретных полей
✅ Поддержка TTL - Автоматическое истечение
✅ Пакетное сохранение - Оптимизация производительности
✅ События аналитики - Отслеживание save/restore
✅ Обработка ошибок - Graceful failures

🔧 Требования​

  • Node.js >= 16.0.0
  • pnpm >= 8.0.0 (рекомендуется)

Установить pnpm:

npm install -g pnpm

💡 Советы по использованию​

Запуск нескольких примеров​

# Терминал 1
pnpm dev:react

# Терминал 2
pnpm dev:vue

# Или все сразу (параллельно)
pnpm dev:all

Используемые порты​

ФреймворкПорт
React3001
Vue3002
Svelte3003
Vanilla JS3004
Next.js3005
Angular4200

🎓 Путь обучения​

Рекомендуемый порядок:

  1. Начните с Vanilla JS - Поймите основные концепции
  2. Попробуйте React - Увидьте интеграцию с фреймворком
  3. Изучите свой фреймворк - Vue, Svelte или Angular
  4. Продвинутый: Next.js - Особенности SSR

📖 Связанная документация​

💬 Нужна помощь?​

Приятного кодинга! 🚀