{"id":16170713,"url":"https://github.com/holtwick/hostic-dom","last_synced_at":"2025-03-19T00:30:32.932Z","repository":{"id":48562436,"uuid":"292520933","full_name":"holtwick/hostic-dom","owner":"holtwick","description":"Lightweight virtual DOM. Generates HTML and XML. Supports CSS selectors. Supports JSX. Parses HTML. Web Scraping. Post process page content.","archived":false,"fork":false,"pushed_at":"2021-07-20T10:08:35.000Z","size":1755,"stargazers_count":5,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T13:18:21.330Z","etag":null,"topics":["css","cssselector","dom","html","jsx","virtualdom","xml"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/holtwick.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["holtwick"]}},"created_at":"2020-09-03T09:10:43.000Z","updated_at":"2021-11-10T08:44:57.000Z","dependencies_parsed_at":"2022-07-26T05:32:08.177Z","dependency_job_id":null,"html_url":"https://github.com/holtwick/hostic-dom","commit_stats":null,"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holtwick%2Fhostic-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holtwick%2Fhostic-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holtwick%2Fhostic-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holtwick%2Fhostic-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/holtwick","download_url":"https://codeload.github.com/holtwick/hostic-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243955755,"owners_count":20374373,"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":["css","cssselector","dom","html","jsx","virtualdom","xml"],"created_at":"2024-10-10T03:19:25.529Z","updated_at":"2025-03-19T00:30:32.580Z","avatar_url":"https://github.com/holtwick.png","language":"JavaScript","readme":"\u003e **This project is inactive, please consider moving to the fully compatible [zeed-dom](https://github.com/holtwick/zeed-dom) with ESM and Typescript support**\n\n# hostic-dom\n\n- Lightweight virtual DOM in pure Javascript\n- Generates HTML and XML\n- Parses HTML\n- Supports CSS selectors and queries\n- Can be used with JSX\n- Easy content manipulation (e.g. through `element.handle` helper)\n- Pretty print HTML (`tidyDOM`)\n\n**Does not aim for completeness!**\n\nThis is a side project of [hostic](https://github.com/holtwick/hostic), the static website generator.\n\n## Example\n\nA simple example without JSX:\n\n```js\nimport { h, xml } from \"hostic-dom\"\n\nlet dom = h(\n  \"ol\",\n  {\n    class: \"projects\",\n  },\n  [\n    h(\"li\", null, \"hostic \", h(\"img\", { src: \"logo.png\" })),\n    h(\"li\", null, \"hostic-dom\"),\n  ]\n)\n\nconsole.log(dom.render())\n// Output: \u003col class=\"projects\"\u003e\u003cli\u003ehostic \u003cimg src=\"logo.png\"\u003e\u003c/li\u003e\u003cli\u003ehostic-dom\u003c/li\u003e\u003c/ol\u003e\n\nconsole.log(dom.render(xml))\n// Output: \u003col class=\"projects\"\u003e\u003cli\u003ehostic \u003cimg src=\"logo.png\" /\u003e\u003c/li\u003e\u003cli\u003ehostic-dom\u003c/li\u003e\u003c/ol\u003e\n```\n\nAnd this one with JSX:\n\n```jsx\nimport { h } from \"hostic-dom\"\n\nlet dom = (\n  \u003col className=\"projects\"\u003e\n    \u003cli\u003ehostic\u003c/li\u003e\n    \u003cli\u003ehostic-dom\u003c/li\u003e\n  \u003c/ol\u003e\n)\n\nlet projects = dom\n  .querySelectorAll(\"li\")\n  .map((e) =\u003e e.textContent)\n  .join(\", \")\n\nconsole.log(projects)\n// Output: hostic, hostic-dom\n\ndom.handle(\"li\", (e) =\u003e {\n  if (!e.textContent.endsWith(\"-dom\")) {\n    e.remove()\n  } else {\n    e.innerHTML = \"\u003cb\u003ehostic-dom\u003c/b\u003e - great DOM helper for static content\"\n  }\n})\n\nconsole.log(dom.render())\n// Output: \u003col class=\"projects\"\u003e\u003cli\u003e\u003cb\u003ehostic-dom\u003c/b\u003e - great DOM helper for static content\u003c/li\u003e\u003c/ol\u003e\n```\n\nIn the second example you can see the special manipulation helper `.handle(selector, fn)` in action. You can also see HTML parsing works seamlessly. You can also parse directly:\n\n```js\nimport { vdom, tidyDOM } from \"hostic-dom\"\n\nlet dom = vdom(\"\u003cdiv\u003eHello World\u003c/div\u003e\")\ntidyDOM(dom)\nconsole.log(dom.render())\n// Output is pretty printed like: \u003cdiv\u003e\n//   Hello World\n// \u003c/div\u003e\n```\n\nThese examples are available at [github.com/holtwick/hostic-dom-example](https://github.com/holtwick/hostic-dom-example).\n\n## JSX\n\nUsually JSX is optimized for React i.e. it expect `React.creatElement` to exist and be the factory for generating the nodes. You can of course get the same effect here if you set up a helper like this:\n\n```js\nimport { html } from \"hostic-dom\"\n\nvar React = {\n  createElement: html,\n}\n```\n\nBut more common is the use of `h` as the factory function. Here is how you can set up this behavior for various environments:\n\n### Babel.js\n\nAdd required plugins:\n\n```shell script\nnpm i -D @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx\n```\n\nThen add this to `.babelrc`:\n\n```json\n{\n  \"plugins\": [\n    \"@babel/plugin-syntax-jsx\",\n    [\n      \"@babel/plugin-transform-react-jsx\",\n      {\n        \"pragma\": \"h\"\n      }\n    ]\n  ]\n}\n```\n\n### TypeScript\n\nIn [`tsconfig.json`](https://www.typescriptlang.org/docs/handbook/compiler-options-in-msbuild.html#mappings):\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"h\"\n  }\n}\n```\n\n### ESBuild\n\nIn options:\n\n```js\n{\n  jsxFactory: \"h\"\n}\n```\n\nOr alternatively as [command line option](https://github.com/evanw/esbuild#command-line-usage): `--jsx-factory=h`\n\n### Browser DOM\n\nThe JSX factory can also be used to directly create HTML DOM nodes in the browser. Just create the `h` function and let it use the browser's `document` object:\n\n```js\nconst { hFactory } = require(\"hostic-dom\")\n\nexport let h = hFactory({ document })\n```\n\n### Unpkg\n\n`hostic-dom` is also available via **unpkg** via \u003chttps://unpkg.com/hostic-dom\u003e. The global name provided here is `hosticDOM` i.e. you can easily use it like this:\n\n```html\n\u003cscript crossorigin src=\"https://unpkg.com/hostic-dom\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const { h } = hosticDOM\n  // Your code here\n\u003c/script\u003e\n```\n\n## Misc\n\n- To set namespace colons in JSX use double underscore i.e. `\u003cxhtml__link /\u003e` becomes `\u003cxhtml:link /\u003e`\n- To allow `CDATA` use the helper function e.g. `\u003cdiv\u003e{ CDATA(yourRawData) }\u003c/div\u003e`\n- `style` attributes can handle objects e.g. `\u003cspan style={{backgroundColor: 'red'}} /\u003e` becomes `\u003cspan style=\"background-color: red\" /\u003e`\n","funding_links":["https://github.com/sponsors/holtwick"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholtwick%2Fhostic-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fholtwick%2Fhostic-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholtwick%2Fhostic-dom/lists"}