{"id":15412805,"url":"https://github.com/aralroca/parse-html-stream","last_synced_at":"2025-04-19T04:15:25.469Z","repository":{"id":222333432,"uuid":"756973059","full_name":"aralroca/parse-html-stream","owner":"aralroca","description":"During the HTML streaming, capture the DOM Nodes to work with them","archived":false,"fork":false,"pushed_at":"2025-03-05T11:19:47.000Z","size":35,"stargazers_count":29,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-17T12:52:24.370Z","etag":null,"topics":["dom","dom-manipulation","html","htmx","javascript","streaming","typescript","walker"],"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/aralroca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-02-13T17:00:01.000Z","updated_at":"2025-04-12T08:42:09.000Z","dependencies_parsed_at":"2025-03-26T11:37:05.876Z","dependency_job_id":"2cb34fcd-7c9d-43da-9278-bb35b5bfab3b","html_url":"https://github.com/aralroca/parse-html-stream","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"d3395135a5a7a39f81416b7b6eadc64e5d1e659e"},"previous_names":["aralroca/parse-html-stream"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fparse-html-stream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fparse-html-stream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fparse-html-stream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fparse-html-stream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aralroca","download_url":"https://codeload.github.com/aralroca/parse-html-stream/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249414213,"owners_count":21267724,"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":["dom","dom-manipulation","html","htmx","javascript","streaming","typescript","walker"],"created_at":"2024-10-01T16:54:29.117Z","updated_at":"2025-04-19T04:15:25.450Z","avatar_url":"https://github.com/aralroca.png","language":"TypeScript","readme":"# parse-html-stream\n\n## Overview\n\n`parse-html-stream` is a JavaScript library designed for client-side applications, specifically tailored for processing HTML streams. The primary objective is to capture and manipulate DOM Nodes as they are received, enabling seamless integration into hypermedia communication paradigms, such as HTMX.\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm version](https://badge.fury.io/js/parse-html-stream.svg)](https://badge.fury.io/js/parse-html-stream)\n![npm](https://img.shields.io/npm/dw/parse-html-stream)\n[![size](https://img.shields.io/bundlephobia/minzip/parse-html-stream)](https://bundlephobia.com/package/parse-html-stream)\n[![PRs Welcome][badge-prwelcome]][prwelcome]\n\u003ca href=\"https://github.com/aralroca/parse-html-stream/actions?query=workflow%3ACI\" alt=\"Tests status\"\u003e\n\u003cimg src=\"https://github.com/aralroca/parse-html-stream/workflows/CI/badge.svg\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=aralroca\"\u003e\n\u003cimg src=\"https://img.shields.io/twitter/follow/aralroca?style=social\u0026logo=x\"\n            alt=\"follow on Twitter\"\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n[badge-prwelcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prwelcome]: http://makeapullrequest.com\n[spectrum]: https://spectrum.chat/parse-html-stream\n\n## Getting started\n\nRun:\n\n```sh\nbun install parse-html-stream\n```\n\n## Usage Example\n\nUtilize the library by leveraging the asynchronous generator for parsing HTML streams. The following TypeScript example demonstrates its usage:\n\n```ts\nimport parseHTMLStream from \"parse-html-stream\";\n\n// ...\n\nconst reader = res.body.getReader();\n\nfor await (const node of parseHTMLStream(reader)) {\n  console.log(node);\n}\n```\n\nThis code snippet showcases how to iterate through the DOM Nodes in a streaming fashion, offering a practical approach for processing HTML streams in real-time.\n\n## Walker example\n\nIf you prefer to have control over moving around the HTML tree of the stream, you can use the following function:\n\n```ts\nimport htmlStreamWalker from \"parse-html-stream/walker\";\n\n// ...\n\nconst reader = res.body.getReader();\nconst walker = await htmlStreamWalker(reader);\n\n// Root node\nconst rootNode = walker.rootNode \n\n// Gives the firstChild taking account the stream chunks\nconst child = await walker.firstChild(rootNode); \n\n// Gives the nextSibling taking account the stream chunks\nconst brother = await walker.nextSibling(rootNode); \n\n// You can do it with every HTML node:\nconst childOfBrother = await walker.firstChild(brother);\n```\n\nThe stream is processed as you walk through the tree, whenever it does not find a `firstChild` or `nextSibling` and has not yet finished the stream, it asks for another chunk. This way you can walk through the tree during the stream.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faralroca%2Fparse-html-stream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faralroca%2Fparse-html-stream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faralroca%2Fparse-html-stream/lists"}