Skip to content

douglasduteil/htmx.ext...chunked-transfer

Repository files navigation

htmx.ext...chunked-transfer

CI NPM version Conventional Commits

Chunked transfer encoding extension for htmx .

This extension adds Chunked transfer encoding to htmx requests. \following bigskysoftware/htmx#1911

Install

$ npm install htmx.ext...chunked-transfer
<script src="https://unpkg.com/htmx.ext...chunked-transfer/dist/index.js"></script>

Usage

<body hx-ext="chunked-transfer">
  ...
</body>

Swap Mode

By default, chunks are appended to the target element. Use hx-chunked-mode="swap" to replace the previous chunk with each new one:

<form hx-post="/process" hx-ext="chunked-transfer" hx-chunked-mode="swap">
  <button type="submit">Process</button>
</form>

Append mode (default): Accumulates all chunks

Chunk 1: <p>Loading...</p>
Chunk 2: <p>Loading...</p><p>50%</p>
Chunk 3: <p>Loading...</p><p>50%</p><p>Done!</p>

Swap mode: Shows only the latest chunk

Chunk 1: <p>Loading...</p>
Chunk 2: <p>50%</p>           (replaces previous)
Chunk 3: <p>Done!</p>         (replaces previous)

Comment Filtering

Comment-only chunks (heartbeats) are automatically ignored:

<!-- heartbeat -->
← Ignored, no DOM update
<p>Content</p>
← Processed
<!-- debug -->
<p>Content</p>
← Processed (has content)

Testing

# Unit tests
bun test

# E2E tests (example/oob)
# Terminal 1: Start dev server
bun --cwd example/oob dev

# Terminal 2: Run tests
PUPPETEER_EXECUTABLE_PATH=$(which chromium) bun test ./example/oob/index.test.ts

About

Chunked transfer encoding extension for htmx.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •