要素

PrefXはJSXマークアップをDOM要素に直接変換します。これにより、シグナルを使用して属性、プロパティ、イベントリスナーの詳細なリアクティビティを設定できます。

実装機能：

リアクティビティ: シグナルシステム（@preact/signals-core）を使用してパラメータの変更を追跡します。
ライフサイクル管理: 要素が削除されると、イベントハンドラとサブスクリプションを自動的に削除します。
プロパティ名の変換: 属性のキャメルケースをケバブケースに変換します。
名前空間のサポート: HTML、SVG、MathML要素に対応しています。

要素パラメータ

$で始まるパラメータは、DOM要素のプロパティを直接設定します。値としてシグナルが渡された場合、プロパティはそのシグナルと同期されます。

tsx

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

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

onで始まるパラメータはイベントリスナーとして扱われます。単純なハンドラ関数、または修飾子付きのオブジェクトを渡すことができます。値としてシグナルが渡された場合、ハンドラはそのシグナルと同期されます。

tsx

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

残りのパラメータは属性として処理されます。

tsx

// 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要素への参照を取得できます。

tsx

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

名前空間

これは通常は必須ではありませんが、$ns パラメータを使用して要素の名前空間を明示的に指定できます。

tsx

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

要素 ​

要素パラメータ ​

要素参照 ​

名前空間 ​

要素

要素パラメータ

要素参照

名前空間