Bun + htmx の例

概要:

Bun + htmx 使う例になります。

• bundler は、Bunを使用する例です。

[ 作成日: 2024/08/27 ]

---

構成

• htmx

• Bun: 1.1.26

• typescript

• express

---

作成したコード

• https://github.com/kuc-arc-f/bun_14htmx

---

手動実行など

• start

bun run src/index.ts

• watch: 監視モード

bun --watch src/index.ts

• build

bun build --target=node --minify src/index.ts --outfile dist/index.js

---

Build

• package.json 使う場合。

bun run build
bun run dev

#watch-mode
bun run watch

---

• src/pages/Htmx2.ts
• hx-get: GET通信

https://github.com/kuc-arc-f/bun_14htmx/blob/main/src/pages/Htmx2.ts

<button
  hx-get="https://jsonplaceholder.typicode.com/users/1"
  hx-target="#h2"
>
  Click
</button>
<h3 id="h2">ここに表示</h3>

---

• src/pages/Htmx3.ts

• hx-post: POST通信、内部APIエンドポイントに送信します。

• https://github.com/kuc-arc-f/bun_14htmx/blob/main/src/pages/Htmx3.ts

<form
hx-post="/api/test/test"
hx-trigger="submit"
hx-target="#h2"
hx-on--before-request=""
hx-on--after-request="alert("OK, post send")"
>
  <input type="text" name="name" />
  <button type="submit">Add</button>
</form>
<hr />
<h3 id="h2">ここに表示</h3>

---