Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/holtwick/hostic-dom
Lightweight virtual DOM. Generates HTML and XML. Supports CSS selectors. Supports JSX. Parses HTML. Web Scraping. Post process page content.
https://github.com/holtwick/hostic-dom
css cssselector dom html jsx virtualdom xml
Last synced: 9 days ago
JSON representation
Lightweight virtual DOM. Generates HTML and XML. Supports CSS selectors. Supports JSX. Parses HTML. Web Scraping. Post process page content.
- Host: GitHub
- URL: https://github.com/holtwick/hostic-dom
- Owner: holtwick
- License: mit
- Created: 2020-09-03T09:10:43.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-20T10:08:35.000Z (over 3 years ago)
- Last Synced: 2024-10-11T03:19:25.871Z (26 days ago)
- Topics: css, cssselector, dom, html, jsx, virtualdom, xml
- Language: JavaScript
- Homepage:
- Size: 1.67 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
> **This project is inactive, please consider moving to the fully compatible [zeed-dom](https://github.com/holtwick/zeed-dom) with ESM and Typescript support**
# hostic-dom
- Lightweight virtual DOM in pure Javascript
- Generates HTML and XML
- Parses HTML
- Supports CSS selectors and queries
- Can be used with JSX
- Easy content manipulation (e.g. through `element.handle` helper)
- Pretty print HTML (`tidyDOM`)
**Does not aim for completeness!**
This is a side project of [hostic](https://github.com/holtwick/hostic), the static website generator.
## Example
A simple example without JSX:
```js
import { h, xml } from "hostic-dom"
let dom = h(
"ol",
{
class: "projects",
},
[
h("li", null, "hostic ", h("img", { src: "logo.png" })),
h("li", null, "hostic-dom"),
]
)
console.log(dom.render())
// Output:
- hostic
- hostic-dom
console.log(dom.render(xml))
// Output:
- hostic
- hostic-dom
```
And this one with JSX:
```jsx
import { h } from "hostic-dom"
let dom = (
- hostic
- hostic-dom
)
let projects = dom
.querySelectorAll("li")
.map((e) => e.textContent)
.join(", ")
console.log(projects)
// Output: hostic, hostic-dom
dom.handle("li", (e) => {
if (!e.textContent.endsWith("-dom")) {
e.remove()
} else {
e.innerHTML = "hostic-dom - great DOM helper for static content"
}
})
console.log(dom.render())
// Output:
-
hostic-dom - great DOM helper for static content
```
In 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:
```js
import { vdom, tidyDOM } from "hostic-dom"
let dom = vdom("
Hello World")
tidyDOM(dom)
console.log(dom.render())
// Output is pretty printed like:
// Hello World
//
```
These examples are available at [github.com/holtwick/hostic-dom-example](https://github.com/holtwick/hostic-dom-example).
## JSX
Usually 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:
```js
import { html } from "hostic-dom"
var React = {
createElement: html,
}
```
But more common is the use of `h` as the factory function. Here is how you can set up this behavior for various environments:
### Babel.js
Add required plugins:
```shell script
npm i -D @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx
```
Then add this to `.babelrc`:
```json
{
"plugins": [
"@babel/plugin-syntax-jsx",
[
"@babel/plugin-transform-react-jsx",
{
"pragma": "h"
}
]
]
}
```
### TypeScript
In [`tsconfig.json`](https://www.typescriptlang.org/docs/handbook/compiler-options-in-msbuild.html#mappings):
```json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "h"
}
}
```
### ESBuild
In options:
```js
{
jsxFactory: "h"
}
```
Or alternatively as [command line option](https://github.com/evanw/esbuild#command-line-usage): `--jsx-factory=h`
### Browser DOM
The 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:
```js
const { hFactory } = require("hostic-dom")
export let h = hFactory({ document })
```
### Unpkg
`hostic-dom` is also available via **unpkg** via . The global name provided here is `hosticDOM` i.e. you can easily use it like this:
```html
const { h } = hosticDOM
// Your code here
```
## Misc
- To set namespace colons in JSX use double underscore i.e. `` becomes ``
- To allow `CDATA` use the helper function e.g. `
{ CDATA(yourRawData) }`
- `style` attributes can handle objects e.g. `` becomes ``