haunted

幽霊？ ?

React のフック API ですが、標準 Web コンポーネントと lit-html または hyperHTML 用です。

ドキュメントを読む

 < html lang =" en " >
  < my-counter > </ my-counter >

  < script type =" module " >
    import { html } from 'https://unpkg.com/lit?module' ;
    import { component , useState } from 'https://unpkg.com/haunted/haunted.js' ;

    function Counter ( ) {
      const [ count , setCount ] = useState ( 0 ) ;

      return html `
        < div id =" count " > ${ count } </ div >
        < button type =" button " @click = ${ ( ) => setCount ( count + 1 ) } >
          Increment
        </ button >
      ` ;
    }

    customElements . define ( 'my-counter' , component ( Counter ) ) ;
  </ script >
</ html >

この要点には、さらに多くの統合例が記載されています。

フック

Haunted は React Hooks と同じ API をサポートしています。そうすることで、バンドラーの設定でパッケージ名をエイリアスするだけで、npm で利用可能なフックを再利用できることが期待されます。

現在、Haunted は次のフックをサポートしています。

• useコールバック
• useContext
• useController
• useEffect
• useLayoutEffect
• 使用メモ
• useReducer
• useRef
• 使用状態

関数のシグネチャ

 // Or another renderer, see Guides
type Renderer = ( element : Element ) => TemplateResult ;

interface Options {
  baseElement : HTMLElement ;
  observedAttributes : string [ ] ;
  useShadowDOM : boolean
}

declare function component (
  renderer : Renderer ,
  options : Options
) : Element ;

declare function component < BaseElement = HTMLElement > (
  renderer : Renderer ,
  baseElement : BaseElement ,
  options : Options
) : Element

declare function virtual ( renderer : Renderer ) : Directive 

ライセンス

BSD-2 条項