Elementler

PreffX, JSX işaretlemesini doğrudan DOM elementlerine dönüştürür. Bu sayede, signal'leri (sinyalleri) kullanarak öznitelikler, özellikler ve olay dinleyicileri için ayrıntılı tepkisellik (reactivity) yapılandırması yapabilirsiniz.

Uygulama özellikleri:

1. Tepkisellik: Parametrelerdeki değişiklikleri izlemek için bir sinyal sistemi (@preact/signals-core) kullanır.
2. Yaşam döngüsü yönetimi: Element kaldırıldığında olay işleyicilerini ve abonelikleri otomatik olarak temizler.
3. Özellik adı dönüştürme: Öznitelikler için camelCase formatını kebab-case formatına dönüştürür.
4. İsim alanı (namespace) desteği: HTML, SVG ve MathML elementleriyle çalışır.

Element Parametreleri

$ ile başlayan parametreler, DOM elementi özelliklerini doğrudan ayarlar. Değer olarak bir sinyal (signal) geçilirse, ilgili özellik o sinyal ile senkronize edilir:

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

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

on ile başlayan parametreler, olay dinleyicileri (event listeners) olarak ele alınır. İster basit bir işleyici fonksiyonu, ister değiştiriciler (modifiers) içeren bir nesne aktarabilirsiniz. Değer olarak bir sinyal (signal) verildiğinde ise, işleyici bu sinyal ile senkronize edilir:

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

Geriye kalan parametreler öznitelik olarak işlenir:

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

Elemente Referansı

$ref parametresi, DOM öğesine bir referans almanızı sağlar:

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

Ad Alanı (Namespace)

Buna genellikle gerek duyulmaz; ancak $ns parametresini kullanarak bir öğe için ad alanını açıkça belirtebilirsiniz:

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