Integrations
Recast provides integrations with popular libraries and tools through specialized Template methods and helpers.
HTMX Integration
Import from:
1import { hx } from "@reface/recast/htmx";
Basic Usage
HTMX attributes can be added to any Template:
1import { div } from "@reface/recast";
2
3div({
4 ​"hx-post": "/api/submit",
5 ​"hx-trigger": "click",
6 ​"hx-target": "#result",
7})`Submit`;
8
9// Or using the hx helper
10div(
11 ​hx({
12 ​ ​post: "/api/submit",
13 ​ ​trigger: "click",
14 ​ ​target: "#result",
15 ​})
16)`Submit`;
Component Integration
ComponentNodeProxies can use HTMX with automatic ID linking:
1const Form = component((props) => (
2 ​<div>
3 ​ ​<form hx-post="/submit" hx-target={`#result-${props.__rcc}`}>
4 ​ ​ ​<input name="data" />
5 ​ ​ ​<button>Submit</button>
6 ​ ​</form>
7 ​ ​<div id={`result-${props.__rcc}`}>Result will appear here</div>
8 ​</div>
9));
HTMX Helper Types
Full TypeScript support for HTMX attributes:
1interface HtmxConfig {
2 ​get?: string;
3 ​post?: string;
4 ​put?: string;
5 ​delete?: string;
6 ​patch?: string;
7 ​trigger?: string;
8 ​target?: string;
9 ​swap?:
10 ​ ​| "innerHTML"
11 ​ ​| "outerHTML"
12 ​ ​| "beforebegin"
13 ​ ​| "afterbegin"
14 ​ ​| "beforeend"
15 ​ ​| "afterend";
16 ​select?: string;
17 ​headers?: Record<string, string>;
18 ​vals?: Record<string, string>;
19 ​confirm?: string;
20 ​indicator?: string;
21}
22
23// Usage with type checking
24div(
25 ​hx({
26 ​ ​post: "/api/submit", // ✓ valid
27 ​ ​trigger: "click", // ✓ valid
28 ​ ​swap: "innerHTML", // ✓ valid
29 ​ ​invalid: true, // ✗ Error: unknown property
30 ​})
31);
Extended Functionality
Additional HTMX features through Template methods:
1// Boosting links
2a(
3 ​hx({
4 ​ ​boost: true,
5 ​ ​pushUrl: true,
6 ​})
7)`Home`;
8
9// Loading indicators
10div(
11 ​hx({
12 ​ ​post: "/api/slow",
13 ​ ​indicator: "#spinner",
14 ​})
15)`
16 ​Submit
17 ​${div({ id: "spinner", class: "htmx-indicator" })`Loading...`}
18`;
19
20// Request targeting
21form(
22 ​hx({
23 ​ ​post: "/api/submit",
24 ​ ​target: "#result",
25 ​ ​swap: "outerHTML",
26 ​})
27)`
28 ​<input name="data" />
29 ​<button>Submit</button>
30`;
Server-Side Integration
Handle HTMX requests on the server:
1// Check for HTMX request
2app.post("/api/submit", (req) => {
3 ​const isHtmx = req.headers["HX-Request"] === "true";
4
5 ​if (isHtmx) {
6 ​ ​// Return partial HTML for HTMX
7 ​ ​return div({ id: "result" })`Success!`;
8 ​}
9
10 ​// Return full page for regular request
11 ​return fullPage();
12});