gradiente

Русский

English

Русский

English

Appearance

🧱 Проектирование собственного типа градиента ​

В этом разделе показано, как спроектировать кастомный градиент с помощью gradiente и Pattern DSL.
Путь простой: идея → паттерн → валидация → реальное использование.

🎯 Цель ​

Тип градиента определяется через ответы на три вопроса:

  • Какие входные данные допустимы?
  • Какой структуре они должны следовать?
  • Насколько строгой должна быть валидация?

🧠 Шаг 1 - Определить идею ​

Начать лучше с понятной концепции.

Пример ​

Градиент, который:

  • может иметь опциональное направление
  • должен иметь минимум два color-stop
  • может содержать color-hint

📌 Шаг 2 - Перевести идею в структуру ​

Разбиваем идею на правила:

bash
config → опционально
color-stop → обязателен
color-stop → обязателен
color-hint → опционален между стопами

🧩 Шаг 3 - Собрать паттерн ​

Начинаем с простого:

ts
^[color-stop,color-stop].

Затем расширяем:

ts
^[([config,color-stop]|color-stop),~color-stop].

Затем добавляем поддержку hint:

ts
^[([config,color-stop,([color-hint,color-stop]|color-stop)]|color-stop),~([color-hint,color-stop]|color-stop)].

🧠 Шаг 4 - Проверить логику ​

Проверяем паттерн вопросами:

  • Может ли hint появиться без стопа? ❌
  • Может ли config существовать без достаточного количества стопов? ❌
  • Может ли паттерн завершиться некорректно? ❌

Если да - паттерн нужно уточнить.

🧪 Шаг 5 - Протестировать примеры ​

Валидные ​

bash
color-stop, color-stop
config, color-stop, color-stop
color-stop, color-hint, color-stop

Невалидные ​

bash
config ❌
color-stop, color-hint ❌
config, color-stop ❌

🔄 Шаг 6 - Связать с реальными значениями ​

Паттерн работает с типами:

bash
config → to left
color-stop → red 10%
color-hint → 50%

Пример ​

css
linear-gradient(to left, red 10%, 50%, blue 80%)

🧩 Шаг 7 - Интегрировать в систему ​

Когда паттерн определён, можно:

  • валидировать пользовательский ввод
  • строить редакторы
  • генерировать градиенты
  • нормализовать данные

🧠 Стратегии проектирования ​

Строгий дизайн ​

Используется, когда:

  • рендер всегда должен быть корректным
  • невалидные состояния должны быть невозможны

Гибкий дизайн ​

Используется, когда:

  • строится редактор
  • допускается частичный ввод
  • ввод пользователя происходит постепенно

🔁 Итерационный процесс ​

Проектирование происходит итеративно:

bash
идея → паттерн → тест → уточнение

Сначала простая структура, затем ограничения.

🧠 Ментальная модель ​

Паттерн можно воспринимать как:

bash
программу, которая валидирует поток входных данных

А не просто как структуру.

🔗 Использовать playground ​

Проектировать паттерны намного проще с визуализацией.

👉 Открыть DSL Playground →

🚀 Главный вывод ​

Тип градиента определяется:

  • структурой через DSL
  • ограничениями
  • сценарием использования

С Gradiente DSL всё это находится под контролем.

💡 Финальная мысль ​

Градиенты - это не строки. Это структурированные системы.