https://github.com/jacob-ebey/pipeable-dom
An HTML parser and JSX runtime allowing for HTML to be streamed into a live DOM.
https://github.com/jacob-ebey/pipeable-dom
Last synced: about 1 year ago
JSON representation
An HTML parser and JSX runtime allowing for HTML to be streamed into a live DOM.
- Host: GitHub
- URL: https://github.com/jacob-ebey/pipeable-dom
- Owner: jacob-ebey
- License: mit
- Created: 2024-10-08T07:20:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-17T18:56:03.000Z (over 1 year ago)
- Last Synced: 2025-04-06T01:27:19.941Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 109 KB
- Stars: 72
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pipeable-dom
An HTML parser and JSX runtime allowing for HTML to be streamed into a live DOM.
Sizes:
- `pipeable-dom` - 
- `pipeable-dom/jsx` - 
- `pipeable-dom` + `pipeable-dom/jsx` - 
## `DOMStream`
A `TransformStream` that implements lookahead preloading and browser document request rendering semantics.
```mermaid
sequenceDiagram
participant HTMLSource
participant SourceDOM
participant LoadingProcess
participant TargetDOM
HTMLSource->>SourceDOM: Stream HEAD node
SourceDOM->>TargetDOM: Move HEAD node
HTMLSource->>SourceDOM: Stream BODY node
SourceDOM->>TargetDOM: Move BODY node
HTMLSource->>SourceDOM: Stream IMG1 node (blocking)
SourceDOM->>LoadingProcess: Start loading IMG1
par Process IMG1 and look ahead
LoadingProcess->>LoadingProcess: Load IMG1
and
LoadingProcess-->>HTMLSource: Request next nodes
HTMLSource->>SourceDOM: Stream IMG2 node (blocking)
LoadingProcess-->>SourceDOM: Preload IMG2
end
HTMLSource->>SourceDOM: Stream P node (non-blocking)
LoadingProcess->>TargetDOM: Move IMG1 (after loading)
LoadingProcess->>TargetDOM: Move IMG2 (after loading)
SourceDOM->>TargetDOM: Move P node
Note over HTMLSource,TargetDOM: Streaming continues...
```
This is a derivative of [@MarkdoDevTeam](https://x.com/MarkoDevTeam)'s [writable-dom](https://github.com/marko-js/writable-dom).
## `import "pipeable-dom/browser"`
A stateless JSX runtime that renders to an async HTML stream.
It supports:
the react-jsx runtime
- sync and async functional components
- sync and async generator components
- there is no event / callback system, therefor
- callbacks such as onclick accept strings and render the JS in the attribute
### `swap(target: Element, swap: SwapType, newContent: JSXNode): Promise`
A function to update the DOM using the JSX runtime as the template.
#### `SwapType`
Swap type is inspired by the [`hx-swap`](https://htmx.org/attributes/hx-swap/) attribute from [HTMX](https://htmx.org/).
Allowed values:
- `beforebegin` - Place the new content before the existing node
- `afterbegin` - Place the new content as the first item in the existing node
- `beforeend` - Place the new content as the last item in the existing node
- `afterend` - Place the new content after the existing node
- `outerHTML` - Replace the existing node
- `innerHTML` - Replace the existing node content