htmx.ext...chunked-transfer
v2.3.0
Published
Chunked transfer encoding extension for htmx.
Maintainers
douglasduteilReadme
htmx.ext...chunked-transfer
Chunked transfer encoding extension for htmx .
This extension adds Chunked transfer encoding to htmx requests. \following https://github.com/bigskysoftware/htmx/issues/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)Examples
- Using Hono
- JSx SSR Suspense
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