Элементы

PreffX преобразуем JSX-разметку напрямую в DOM-элементы. Это позволяет настроить детальную реактивность атрибутов, свойств и слушателей событий с помощью сигналов.

Особенности реализации:

1. Реактивность: Использует систему сигналов (@preact/signals-core) для отслеживания изменений параметров
2. Управление жизненным циклом: Автоматически удаляет обработчики событий и подписки при удалении элемента
3. Преобразование имён свойств: Конвертирует camelCase в kebab-case для атрибутов
4. Поддержка пространств имён: Работает с HTML, SVG и MathML элементами

Параметры элемента

Параметры, начинающиеся с $, устанавливают свойства DOM-элемента напрямую. Если в качестве значения передан сигнал, то свойство будет синхронизировано с этим сигналом:

// static property
<div
  $innerHTML='<p>Content</p>'
></div>

// dynamic property
const textContent = signal('Text');
<div
  $textContent={textContent}
></div>

Параметры, начинающиеся с on, обрабатываются как слушатели событий. Можно передать как простую функцию-обработчик, так и объект с модификаторами. Если в качестве значения передан сигнал, то обработчик будет синхронизирован с этим сигналом:

// static simple event listener
<div
  onClick={() => console.log('Click')}
></div>

// static event listener with modifiers
<div
  onClick={{
    handler: () => console.log('Click'),
    // prevent default
    prevent: true,
    // stop propagation
    stop: true,    
    // listener would be automatically removed when invoked
    once: true,
    // listener will never call preventDefault()
    passive: true,
    // events of this type will be dispatched to the
    // registered listener before being dispatched to any EventTarget
    // beneath it in the DOM tree
    capture: true
  }}
></div>

// dynamic event listener
const clickListener = signal(() => console.log('Click'));
<div
  onClick={clickListener}
></div>

Остальные параметры обрабатываются как атрибуты:

// static attributes
<div
  id='my-id'
  data-value='123'
  style='color:red;font-size:16px;'
  class='active'
>
</div>

<div
  style={{
    color: 'red',
    fontSize: '16px'
  }}
  class={{
    active: true,
    passive: false
  }}
>
</div>

// dynamic attributes
const classNames = signal(['active', 'base']);
<div
  class={classNames}
></div>

Ссылка на элемент

Параметр $ref позволяет получить ссылку на DOM-элемент:

// you can use callback
let elementRef;
<div
  $ref={(el) => { elementRef = el; }}
></div>
// or signal
const signalRef = signal();
<div
  $ref={signalRef}
></div>

Пространство имен

Обычно это не требуется, но вы можете явно указать пространство имен для элемента с помощью параметра $ns:

<svg>
  <a $ns='svg'></a>
</svg>