162 lines
4.5 KiB
Markdown
162 lines
4.5 KiB
Markdown
# hast-to-hyperscript [![Build Status][travis-badge]][travis] [![Coverage Status][codecov-badge]][codecov]
|
||
|
||
Transform [HAST][] to something else through a [hyperscript][] DSL.
|
||
|
||
## Installation
|
||
|
||
[npm][]:
|
||
|
||
```bash
|
||
npm install hast-to-hyperscript
|
||
```
|
||
|
||
## Usage
|
||
|
||
```javascript
|
||
var toH = require('hast-to-hyperscript')
|
||
var h = require('hyperscript')
|
||
|
||
var tree = {
|
||
type: 'element',
|
||
tagName: 'p',
|
||
properties: {id: 'alpha', className: ['bravo']},
|
||
children: [
|
||
{type: 'text', value: 'charlie '},
|
||
{
|
||
type: 'element',
|
||
tagName: 'strong',
|
||
properties: {style: 'color: red;'},
|
||
children: [{type: 'text', value: 'delta'}]
|
||
},
|
||
{type: 'text', value: ' echo.'}
|
||
]
|
||
}
|
||
|
||
// Transform (`hyperscript` needs `outerHTML` to stringify):
|
||
var doc = toH(h, tree).outerHTML
|
||
|
||
console.log(doc)
|
||
```
|
||
|
||
Yields:
|
||
|
||
```html
|
||
<p class="bravo" id="alpha">charlie <strong>delta</strong> echo.</p>
|
||
```
|
||
|
||
## API
|
||
|
||
### `toH(h, node[, options|prefix])`
|
||
|
||
Transform [HAST][] to something else through a [hyperscript][] DSL.
|
||
|
||
###### Parameters
|
||
|
||
* `h` ([`Function`][h])
|
||
* `node` ([`Element`][element])
|
||
* `prefix` — Treated as `{prefix: prefix}`
|
||
* `options.prefix` (`string` or `boolean`, optional)
|
||
— Prefix to use as a prefix for keys passed in `attrs` to `h()`,
|
||
this behaviour is turned off by passing `false`, turned on by passing
|
||
a `string`. By default, `h-` is used as a prefix if the given `h`
|
||
is detected as being `virtual-dom/h` or `React.createElement`
|
||
* `options.space` (enum, `'svg'` or `'html'`, default: `'html'`)
|
||
— Whether `node` is in the `'html'` or `'svg'` space.
|
||
If an `svg` element is found when inside the HTML space, `toH` automatically
|
||
switches to the SVG space when entering the element, and switches back when
|
||
leaving
|
||
|
||
###### Returns
|
||
|
||
`*` — Anything returned by invoking `h()`.
|
||
|
||
### `function h(name, attrs, children)`
|
||
|
||
Transform [HAST][] to something else through a hyperscript DSL.
|
||
|
||
###### Parameters
|
||
|
||
* `name` (`string`) — Tag-name of element to create
|
||
* `attrs` (`Object.<string>`) — Attributes to set
|
||
* `children` (`Array.<* | string>`) — List of children and text,
|
||
where children are the result of invoking `h()` previously
|
||
|
||
###### Returns
|
||
|
||
`*` — Anything.
|
||
|
||
###### Caveats
|
||
|
||
**Nodes**: Most hyperscript implementations only support elements and text (as
|
||
leave nodes). HAST supports `doctype`, `comment`, and `root` as well.
|
||
|
||
* If anything other than an `element` or `root` node is given,
|
||
`hast-to-hyperscript` throws
|
||
* If a `root` is given with one element child, that element is
|
||
transformed
|
||
* If a `root` with no children, a non-element only child, or more than one
|
||
children, the children are wrapped in a `div` element
|
||
|
||
If unknown nodes are found deeper in the tree, they are ignored: only `text`
|
||
and `element` nodes are transformed.
|
||
|
||
**Support**: Although there are lots of libs mentioning support for this
|
||
interface, there are significant differences between them. For example,
|
||
hyperscript doesn’t support classes in `attrs`, `virtual-dom/h` needs an
|
||
`attributes` object inside `attrs` most of the time. `hast-to-hyperscript`
|
||
works around these differences for:
|
||
|
||
* [`React.createElement`][react]
|
||
* [`virtual-dom/h`][vdom]
|
||
* [`hyperscript`][hyperscript]
|
||
|
||
## Related
|
||
|
||
* [`hastscript`][hastscript]
|
||
|
||
## Contribute
|
||
|
||
See [`contributing.md` in `syntax-tree/hast`][contributing] for ways to get
|
||
started.
|
||
|
||
This organisation has a [Code of Conduct][coc]. By interacting with this
|
||
repository, organisation, or community you agree to abide by its terms.
|
||
|
||
## License
|
||
|
||
[MIT][license] © [Titus Wormer][author]
|
||
|
||
<!-- Definitions -->
|
||
|
||
[travis-badge]: https://img.shields.io/travis/syntax-tree/hast-to-hyperscript.svg
|
||
|
||
[travis]: https://travis-ci.org/syntax-tree/hast-to-hyperscript
|
||
|
||
[codecov-badge]: https://img.shields.io/codecov/c/github/syntax-tree/hast-to-hyperscript.svg
|
||
|
||
[codecov]: https://codecov.io/github/syntax-tree/hast-to-hyperscript
|
||
|
||
[npm]: https://docs.npmjs.com/cli/install
|
||
|
||
[license]: LICENSE
|
||
|
||
[author]: http://wooorm.com
|
||
|
||
[hast]: https://github.com/syntax-tree/hast
|
||
|
||
[element]: https://github.com/syntax-tree/hast#element
|
||
|
||
[vdom]: https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript
|
||
|
||
[hyperscript]: https://github.com/dominictarr/hyperscript
|
||
|
||
[h]: #function-hname-attrs-children
|
||
|
||
[react]: https://facebook.github.io/react/docs/glossary.html#react-elements
|
||
|
||
[hastscript]: https://github.com/syntax-tree/hastscript
|
||
|
||
[contributing]: https://github.com/syntax-tree/hast/blob/master/contributing.md
|
||
|
||
[coc]: https://github.com/syntax-tree/hast/blob/master/code-of-conduct.md
|