haunted

鬧鬼？ ？

React 的 Hooks 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 支援以下鉤子：

• 使用回調
• 使用上下文
• 使用控制器
• 使用效果
• 使用佈局效果
• 使用備忘錄
• 使用Reducer
• 使用引用
• 使用狀態

函數簽名

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