htmx + Vanilla.js

概要:

htmx + Vanilla.js 的な構成になります。

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

[ 作成日: 2024/08/17 ]

---

構成

• htmx
• Vite:5.2
• typescript: 5.4
• express

---

関連

• Vite SSRページを参考にしました。
• https://github.com/bluwy/create-vite-extra

---

作成したコード

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

---

• src/pages/App.tsx
• SSR表示の例

import renderLayout from "./renderLayout";
//
export default function Page(props: any) { 
  //
  const htm = `
  <h1 className="text-4xl font-bold">hello</h1>
  `;
  return renderLayout({children: htm, title: "Home"});
}

• https://github.com/kuc-arc-f/express_48htmx/blob/main/src/pages/App.tsx

---

• src/pages/Htmx3.ts
• hx-postの例、API連携します。

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

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

---