{"id":19290494,"url":"https://github.com/jacob-ebey/pipeable-dom","last_synced_at":"2025-04-13T10:55:32.289Z","repository":{"id":259384559,"uuid":"869368496","full_name":"jacob-ebey/pipeable-dom","owner":"jacob-ebey","description":"An HTML parser and JSX runtime allowing for HTML to be streamed into a live DOM.","archived":false,"fork":false,"pushed_at":"2024-11-17T18:56:03.000Z","size":112,"stargazers_count":72,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T01:27:19.941Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jacob-ebey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-08T07:20:09.000Z","updated_at":"2025-03-20T01:12:25.000Z","dependencies_parsed_at":"2025-01-16T23:14:26.309Z","dependency_job_id":null,"html_url":"https://github.com/jacob-ebey/pipeable-dom","commit_stats":{"total_commits":27,"total_committers":1,"mean_commits":27.0,"dds":0.0,"last_synced_commit":"7510a6270c537288d7e5303571137a550c87989a"},"previous_names":["jacob-ebey/pipeable-dom"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-ebey%2Fpipeable-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-ebey%2Fpipeable-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-ebey%2Fpipeable-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacob-ebey%2Fpipeable-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacob-ebey","download_url":"https://codeload.github.com/jacob-ebey/pipeable-dom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703195,"owners_count":21148116,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T22:19:26.838Z","updated_at":"2025-04-13T10:55:32.264Z","avatar_url":"https://github.com/jacob-ebey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pipeable-dom\n\nAn HTML parser and JSX runtime allowing for HTML to be streamed into a live DOM.\n\nSizes:\n\n- `pipeable-dom` - ![bundle size image](https://deno.bundlejs.com/badge?q=pipeable-dom@0.0.10)\n- `pipeable-dom/jsx` - ![bundle size image](https://deno.bundlejs.com/badge?q=pipeable-dom@0.0.10/jsx)\n- `pipeable-dom` + `pipeable-dom/jsx` - ![bundle size image](https://deno.bundlejs.com/badge?q=pipeable-dom@0.0.10,pipeable-dom@0.0.10/jsx)\n\n## `DOMStream`\n\nA `TransformStream\u003cstring, Node\u003e` that implements lookahead preloading and browser document request rendering semantics.\n\n```mermaid\nsequenceDiagram\n    participant HTMLSource\n    participant SourceDOM\n    participant LoadingProcess\n    participant TargetDOM\n\n    HTMLSource-\u003e\u003eSourceDOM: Stream HEAD node\n    SourceDOM-\u003e\u003eTargetDOM: Move HEAD node\n    HTMLSource-\u003e\u003eSourceDOM: Stream BODY node\n    SourceDOM-\u003e\u003eTargetDOM: Move BODY node\n    HTMLSource-\u003e\u003eSourceDOM: Stream IMG1 node (blocking)\n    SourceDOM-\u003e\u003eLoadingProcess: Start loading IMG1\n\n    par Process IMG1 and look ahead\n        LoadingProcess-\u003e\u003eLoadingProcess: Load IMG1\n    and\n        LoadingProcess--\u003e\u003eHTMLSource: Request next nodes\n        HTMLSource-\u003e\u003eSourceDOM: Stream IMG2 node (blocking)\n        LoadingProcess--\u003e\u003eSourceDOM: Preload IMG2\n    end\n    HTMLSource-\u003e\u003eSourceDOM: Stream P node (non-blocking)\n\n    LoadingProcess-\u003e\u003eTargetDOM: Move IMG1 (after loading)\n    LoadingProcess-\u003e\u003eTargetDOM: Move IMG2 (after loading)\n    SourceDOM-\u003e\u003eTargetDOM: Move P node\n\n    Note over HTMLSource,TargetDOM: Streaming continues...\n```\n\nThis is a derivative of [@MarkdoDevTeam](https://x.com/MarkoDevTeam)'s [writable-dom](https://github.com/marko-js/writable-dom).\n\n## `import \"pipeable-dom/browser\"`\n\nA stateless JSX runtime that renders to an async HTML stream.\n\nIt supports:\n\nthe react-jsx runtime\n\n- sync and async functional components\n- sync and async generator components\n- there is no event / callback system, therefor\n  - callbacks such as onclick accept strings and render the JS in the attribute\n\n### `swap(target: Element, swap: SwapType, newContent: JSXNode):  Promise\u003cvoid\u003e`\n\nA function to update the DOM using the JSX runtime as the template.\n\n#### `SwapType`\n\nSwap type is inspired by the [`hx-swap`](https://htmx.org/attributes/hx-swap/) attribute from [HTMX](https://htmx.org/).\n\nAllowed values:\n\n- `beforebegin` - Place the new content before the existing node\n- `afterbegin` - Place the new content as the first item in the existing node\n- `beforeend` - Place the new content as the last item in the existing node\n- `afterend` - Place the new content after the existing node\n- `outerHTML` - Replace the existing node\n- `innerHTML` - Replace the existing node content\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacob-ebey%2Fpipeable-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacob-ebey%2Fpipeable-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacob-ebey%2Fpipeable-dom/lists"}