haunted

유령? ?

React의 Hooks API이지만 표준 웹 구성 요소 및 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는 다음 후크를 지원합니다.

• 콜백 사용
• useContext
• useController
• 사용효과
• useLayoutEffect
• 사용메모
• 사용감속기
• 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 조항