Elementos

PreffX convierte el marcado JSX directamente en elementos DOM. Esto permite configurar una reactividad detallada para atributos, propiedades y detectores de eventos mediante señales.

Características de implementación:

1. Reactividad: Utiliza un sistema de señales (@preact/signals-core) para rastrear los cambios en los parámetros
2. Gestión del ciclo de vida: Elimina automáticamente los manejadores de eventos y las suscripciones cuando se elimina el elemento
3. Conversión de nombres de propiedades: Convierte camelCase a kebab-case para los atributos
4. Compatibilidad con espacios de nombres: Funciona con elementos HTML, SVG y MathML

Parámetros del elemento

Los parámetros que comienzan con $ establecen directamente las propiedades de los elementos DOM. Si se pasa una señal como valor, la propiedad se sincronizará con esa señal:

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

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

Los parámetros que comienzan con on se manejan como detectores de eventos. Puede pasar una función controladora simple o un objeto con modificadores. Si se pasa una señal como valor, la controladora se sincronizará con esa señal:

// static event listener
<div
  onClick={() => console.log('clicked')}
></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>

Los parámetros restantes se procesan como atributos:

// 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>

Referencia del elemento

El parámetro $ref permite obtener una referencia al elemento DOM:

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

Espacio de nombres

Normalmente esto no es necesario, pero puede especificar explícitamente el espacio de nombres para un elemento utilizando el parámetro $ns:

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