Контракт фронтенда: с чего начать

Модули фронтенда Wippy переносимы по умолчанию. Модуль должен продолжать работать, когда его импортируют в другой проект Wippy, фасад которого предоставляет другую совместимую тему PrimeVue и не содержит приватного CSS проекта.

Выберите правильный путь

1. Используйте view.page для приложения, отрисовываемого в iframe about:srcdoc.
2. Используйте view.component для пользовательского элемента, отрисовываемого в документе хоста, обычно с shadow root.
3. Если интерфейс отрисовывает кнопку, поле ввода, поле формы, меню, оверлей или другой PrimeVue-подобный элемент управления, используйте PrimeVue, если только он не может обеспечить требуемую семантику и поведение.
4. Компонент, содержащий только контент, например визуализация Chart.js без элементов управления, может обойтись без PrimeVue и Tailwind.
5. Если пользовательский элемент управления всё же необходим, следуйте документам Portable UI Contract и Custom Composites.

PrimeVue — это общий словарь компонентов. Пресет Wippy для Tailwind — поддерживаемый словарь времени сборки. Только утилиты, задокументированные как привязанные ко времени выполнения, продолжают реагировать на смену темы фасада после компиляции.

Карта владения

module source
  -> build command
  -> emitted artifact
  -> registry owner
  -> served URL
  -> Web Host
  -> page srcdoc iframe or component shadow root
  -> AppConfig / router / theme delivery

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

Страницы контракта

• Platform Topology: границы среды выполнения, маршрутизация, доставка CSS, оверлеи и владение.
• Portable UI Contract: нормативные правила по компонентам и стилям.
• Theme Authoring: что относится к custom_css фасада, CSS темы PrimeVue или к модулю.
• Tailwind Contract: утилиты с привязкой ко времени выполнения против скомпилированных констант.
• Token Catalogue: сгенерированный справочник токенов и их происхождение.
• The Design Layer: где размещать то, что нужно нескольким вашим модулям и для чего в теме нет компонента.
• Page Recipe и Web Component Recipe.
• Build and Dependency Contract.
• Configuration and Casing.
• Compliance Rule Index.

Обязательные проверки

• Никогда не изобретайте свойство PrimeVue, API компонента, CSS-переменную или семантическую утилиту Tailwind. Проверяйте их в исходниках выбранного пакета и сгенерированном каталоге.
• Никогда не конструируйте имя токена --p-* по аналогии.
• Никогда не требуйте произвольный класс фасада из переносимого модуля.
• Никогда не выводите контекст маршрута хоста из location браузера. Страницы получают контекст хоста через AppConfig и используют @wippy-fe/router.
• Пересобирайте именно тот пакет-владелец в обслуживаемый вывод перед проверкой в браузере.
• Проверяйте консоль браузера после навигации и значимого взаимодействия.

Модули, привязанные к проекту, находятся вне переносимого контракта. Они описаны только на странице Unsupported Project-Bound Modules; стандартная проверка соответствия возвращает UNSUPPORTED, и стандартный CI падает.