htmx

Hono를 htmx와 함께 사용한다.

typed-htmx

typed-htmx를 사용하면 htmx 속성에 대한 TypeScript 정의와 함께 JSX를 작성할 수 있다. typed-htmx 예제 프로젝트에서 찾을 수 있는 동일한 패턴을 따라 hono/jsx와 함께 사용할 수 있다.

패키지를 설치한다:

npm i -D typed-htmx

src/global.d.ts (또는 HonoX를 사용 중이라면 app/global.d.ts) 파일에서 typed-htmx 타입을 가져온다:

import 'typed-htmx'

Hono의 JSX 타입을 typed-htmx 정의로 확장한다:

// htmx 속성으로 외부 타입을 확장하는 방법을 보여주는 데모.
// 이 경우, Hono는 자체 네임스페이스에서 타입을 가져오므로, 동일하게 네임스페이스를 직접 확장한다.
declare module 'hono/jsx' {
  namespace JSX {
    interface HTMLAttributes extends HtmxAttributes {}
  }
}

관련 자료

• htmx
• typed-htmx