htmx + Preact.js + shadcn/ui, example

概要:

htmx + Preact + shadcn/UI の例になります。

• Typescript フルスタック構成です。
• bundler は、Bun, viteを使用する例です。

[ 作成日: 2024/09/04 ]

---

構成

• shadcn/UI
• Preact
• Bun: 1.1.26
• typescript
• express

---

作成したコード

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

---

build, dev-start

bun run build
bun run dev

---

• src/client/Htmx1.tsx

• https://github.com/kuc-arc-f/bun_18preact/blob/main/src/client/Htmx1.tsx

• hx-post: POST通信、内部API エンドポイント

• hx-target: 受信値をレンダリング

...

<form
hx-post="/api/test/test"
hx-trigger="submit"
hx-target="#h2"
hx-on--before-request=""
hx-on--after-request="alert("OK, post send")"
>
  <Label htmlFor="name">Name</Label><br />
  <Input name="name" placeholder="Name 123" value="name123" />
  <button type="submit" class="btn my-2">[ Post ]</button>
</form>
<hr class="my-2" />
<h3 id="h2">ここに表示</h3>
</div>