@velund/html

HTML-рендерер для системы UI-компонентов Velund.

Этот пакет предоставляет стандартный и встроенный рендерер для Velund, который обрабатывает .html или .htm файлы как шаблоны компонентов. Он функционирует как простая заглушка шаблонизатора, которая отдаёт содержимое HTML-файлов "как есть", без выполнения сложной логики парсинга или рендеринга шаблонов. Это подходит для случаев, когда вам нужны статические HTML-фрагменты или когда вся динамическая логика инкапсулирована в метод prepare компонента.

🚀 Ключевые особенности

• "Как есть" рендеринг: Содержимое .html или .htm файлов передается напрямую как вывод компонента.
• Встроенный: @velund/html поставляется вместе с основным плагином velund и всегда доступен. Вам не нужно устанавливать его или явно указывать в renderers массиве, если только вы не хотите переопределить его поведение или явно показать его в списке.
• Простота: Идеально подходит для базовых статических UI-фрагментов или для демонстрации концепции компонента без необходимости в полном шаблонизаторе.
• Поддержка .html и .htm: Автоматически распознает файлы с этими расширениями.

📦 Установка

Данный рендерер встроен в основной пакет velund и не требует отдельной установки:

# Не требуется:
# npm install @velund/html
# yarn add @velund/html
# pnpm add @velund/html

🛠️ Использование

Поскольку @velund/html является встроенным, вам не нужно явно импортировать его и добавлять в массив renderers в vite.config.ts, если только вы не хотите явно сделать его основным рендерером.

Пример конфигурации в vite.config.ts (показано для ясности, обычно не требуется):

Если вы хотите использовать его как основной рендерер:

// vite.config.ts
import { defineConfig } from 'vite';
import velund from 'velund';

export default defineConfig({
  plugins: [
    velund({
      renderer: 'html', // Делаем 'html' основным рендерером
      // `@velund/html` встроен, поэтому его не обязательно добавлять в массив renderers,
      // но если добавите, он будет работать так же:
      // renderers: [
      //   htmlRenderer(), // Если вы его импортируете, что обычно не требуется для встроенного
      // ],
      // ... другие настройки velund
    }),
  ],
});

Пример Velund-компонента с использованием HTML-шаблона:

// src/components/StaticMessage.vel.ts
import { defineComponent } from 'velund/common';
import { Type } from '@sinclair/typebox';
import template from './StaticMessage.html'; // Ваш HTML-шаблон

export default defineComponent({
  name: 'StaticMessage', // Имя компонента
  template, // Путь к файлу HTML

  // Схема контекста: даже если шаблон статичен, сюда можно передать данные
  // которые будут доступны бэкенду при рендеринге компонента.
  contextSchema: Type.Object({
    timestamp: Type.String(),
  }),

  // Метод prepare может использоваться для модификации контекста
  // даже если рендерер его "не видит" в HTML-файле.
  // Это полезно для бэкенда, который будет знать финальный контекст.
  async prepare() {
    return { timestamp: new Date().toISOString() };
  },
});

src/components/StaticMessage.html:

<div class="static-content">
  <h2>Привет, Velund!</h2>
  <p>Это простой HTML-компонент. Содержимое файла отдается как есть.</p>
  <!-- Переменные {{ ... }} или теги шаблонизатора здесь НЕ будут обработаны этим рендерером. -->
</div>