1
- # hast-to-hyperscript [ ![ Build Status ] [ travis-badge ]] [ travis ] [ ![ Coverage Status ] [ codecov-badge ]] [ codecov ]
1
+ # hast-to-hyperscript
2
2
3
- Transform [ HAST] [ ] to something else through a [ hyperscript] [ ] DSL.
3
+ [ ![ Build] [ build-badge ]] [ build ]
4
+ [ ![ Coverage] [ coverage-badge ]] [ coverage ]
5
+ [ ![ Downloads] [ downloads-badge ]] [ downloads ]
6
+ [ ![ Size] [ size-badge ]] [ size ]
7
+ [ ![ Sponsors] [ sponsors-badge ]] [ collective ]
8
+ [ ![ Backers] [ backers-badge ]] [ collective ]
9
+ [ ![ Chat] [ chat-badge ]] [ chat ]
4
10
5
- ## Installation
11
+ [ ** hast** ] [ hast ] utility to transform a [ * tree* ] [ tree ] to something else through
12
+ a [ hyperscript] [ ] DSL.
13
+
14
+ ## Install
6
15
7
16
[ npm] [ ] :
8
17
9
- ``` bash
18
+ ``` sh
10
19
npm install hast-to-hyperscript
11
20
```
12
21
13
22
## Usage
14
23
15
- ``` javascript
24
+ ``` js
16
25
var toH = require (' hast-to-hyperscript' )
17
26
var h = require (' hyperscript' )
18
27
@@ -46,65 +55,75 @@ Yields:
46
55
47
56
## API
48
57
49
- ### ` toH(h, node [, options|prefix]) `
58
+ ### ` toH(h, tree [, options|prefix]) `
50
59
51
- Transform [ HAST] [ ] to something else through a [ hyperscript] [ ] DSL.
60
+ Transform a [ ** hast** ] [ hast ] [ * tree* ] [ tree ] to something else through a
61
+ [ hyperscript] [ ] DSL.
52
62
53
63
###### Parameters
54
64
55
- * ` h ` ([ ` Function ` ] [ h ] )
56
- * ` node ` ([ ` Element ` ] [ element ] )
65
+ * ` h ` ([ ` Function ` ] [ h ] ) — Hyperscript function
66
+ * ` tree ` ([ ` Node ` ] [ node ] ) — [ * Tree * ] [ tree ] to transform
57
67
* ` prefix ` — Treated as ` {prefix: prefix} `
58
68
* ` options.prefix ` (` string ` or ` boolean ` , optional)
59
69
— Prefix to use as a prefix for keys passed in ` attrs ` to ` h() ` ,
60
70
this behaviour is turned off by passing ` false ` , turned on by passing
61
- a ` string ` . By default, ` h- ` is used as a prefix if the given ` h `
62
- is detected as being ` virtual-dom/h ` or ` React.createElement `
71
+ a ` string ` .
72
+ By default, ` h- ` is used as a prefix if the given ` h ` is detected as being
73
+ ` virtual-dom/h ` or ` React.createElement `
63
74
* ` options.space ` (enum, ` 'svg' ` or ` 'html' ` , default: ` 'html' ` )
64
75
— Whether ` node ` is in the ` 'html' ` or ` 'svg' ` space.
65
76
If an ` svg ` element is found when inside the HTML space, ` toH ` automatically
66
77
switches to the SVG space when entering the element, and switches back when
67
- leaving
78
+ exiting
68
79
69
80
###### Returns
70
81
71
82
` * ` — Anything returned by invoking ` h() ` .
72
83
73
84
### ` function h(name, attrs, children) `
74
85
75
- Transform [ HAST ] [ ] to something else through a hyperscript DSL .
86
+ Create an [ * element * ] [ element ] from the given values .
76
87
77
88
###### Parameters
78
89
79
90
* ` name ` (` string ` ) — Tag-name of element to create
80
91
* ` attrs ` (` Object.<string> ` ) — Attributes to set
81
- * ` children ` (` Array.<* | string> ` ) — List of children and text,
82
- where children are the result of invoking ` h() ` previously
92
+ * ` children ` (` Array.<* | string> ` ) — List of children (results of previously
93
+ invoking ` h() ` )
83
94
84
95
###### Returns
85
96
86
97
` * ` — Anything.
87
98
88
- ###### Caveats
99
+ ##### Caveats
100
+
101
+ ###### Nodes
89
102
90
- ** Nodes** : Most hyperscript implementations only support elements and text (as
91
- leave nodes). HAST supports ` doctype ` , ` comment ` , and ` root ` as well.
103
+ Most Hyperscript implementations only support [ * elements* ] [ element ] and
104
+ [ * texts* ] [ text ] .
105
+ [ ** hast** ] [ hast ] supports [ * doctype* ] [ doctype ] , [ * comment* ] [ comment ] , and
106
+ [ * root* ] [ root ] as well.
92
107
93
- * If anything other than an ` element ` or ` root ` node is given,
94
- ` hast-to-hyperscript ` throws
95
- * If a ` root ` is given with one element child, that element is
96
- transformed
97
- * If a ` root ` with no children, a non- element only child, or more than one
98
- children , the children are wrapped in a ` div ` element
108
+ * If anything other than an ` element ` or ` root ` node is given, ` toH ` throws
109
+ * If a [ * root * ] [ root ] is given with no [ * children * ] [ child ] , an empty ` div `
110
+ [ * element* ] [ element ] is returned
111
+ * If a [ * root * ] [ root ] is given with one [ * element * ] [ element ] [ * child * ] [ child ] ,
112
+ that element is transformed
113
+ * Otherwise , the children are wrapped in a ` div ` [ * element* ] [ element ]
99
114
100
- If unknown nodes are found deeper in the tree, they are ignored: only ` text `
101
- and ` element ` nodes are transformed.
115
+ If unknown nodes (a node with a [ * type* ] [ type ] not defined by [ ** hast** ] [ hast ] )
116
+ are found as [ * descendants* ] [ descendant ] of the given [ * tree* ] [ tree ] , they are
117
+ ignored: only [ * text* ] [ text ] and [ * element* ] [ element ] are transformed.
102
118
103
- ** Support** : Although there are lots of libs mentioning support for this
104
- interface, there are significant differences between them. For example,
105
- hyperscript doesn’t support classes in ` attrs ` , ` virtual-dom/h ` needs an
106
- ` attributes ` object inside ` attrs ` most of the time. ` hast-to-hyperscript `
107
- works around these differences for:
119
+ ###### Support
120
+
121
+ Although there are lots of libraries mentioning support for a hyperscript-like
122
+ interface, there are significant differences between them.
123
+ For example, [ ` hyperscript ` ] [ hyperscript ] doesn’t support classes in ` attrs ` and
124
+ [ ` virtual-dom/h ` ] [ vdom ] needs an ` attributes ` object inside ` attrs ` most of the
125
+ time.
126
+ ` toH ` works around these differences for:
108
127
109
128
* [ ` React.createElement ` ] [ react ]
110
129
* Vue’s [ ` createElement ` ] [ vue ]
@@ -117,48 +136,88 @@ works around these differences for:
117
136
118
137
## Contribute
119
138
120
- See [ ` contributing.md ` in ` syntax-tree/hast ` ] [ contributing ] for ways to get
139
+ See [ ` contributing.md ` in ` syntax-tree/.github ` ] [ contributing ] for ways to get
121
140
started.
141
+ See [ ` support.md ` ] [ support ] for ways to get help.
122
142
123
- This organisation has a [ Code of Conduct] [ coc ] . By interacting with this
124
- repository, organisation, or community you agree to abide by its terms.
143
+ This project has a [ Code of Conduct] [ coc ] .
144
+ By interacting with this repository, organisation, or community you agree to
145
+ abide by its terms.
125
146
126
147
## License
127
148
128
149
[ MIT] [ license ] © [ Titus Wormer] [ author ]
129
150
130
151
<!-- Definitions -->
131
152
132
- [ travis-badge ] : https://img.shields.io/travis/syntax-tree/hast-to-hyperscript.svg
153
+ [ build-badge ] : https://img.shields.io/travis/syntax-tree/hast-to-hyperscript.svg
154
+
155
+ [ build ] : https://travis-ci.org/syntax-tree/hast-to-hyperscript
156
+
157
+ [ coverage-badge ] : https://img.shields.io/codecov/c/github/syntax-tree/hast-to-hyperscript.svg
158
+
159
+ [ coverage ] : https://codecov.io/github/syntax-tree/hast-to-hyperscript
160
+
161
+ [ downloads-badge ] : https://img.shields.io/npm/dm/hast-to-hyperscript.svg
162
+
163
+ [ downloads ] : https://www.npmjs.com/package/hast-to-hyperscript
133
164
134
- [ travis ] : https://travis-ci.org/syntax-tree/ hast-to-hyperscript
165
+ [ size-badge ] : https://img.shields.io/bundlephobia/minzip/ hast-to-hyperscript.svg
135
166
136
- [ codecov-badge ] : https://img.shields.io/codecov/c/github/syntax-tree/ hast-to-hyperscript.svg
167
+ [ size ] : https://bundlephobia.com/result?p= hast-to-hyperscript
137
168
138
- [ codecov ] : https://codecov.io/github/syntax-tree/hast-to-hyperscript
169
+ [ sponsors-badge ] : https://opencollective.com/unified/sponsors/badge.svg
170
+
171
+ [ backers-badge ] : https://opencollective.com/unified/backers/badge.svg
172
+
173
+ [ collective ] : https://opencollective.com/unified
174
+
175
+ [ chat-badge ] : https://img.shields.io/badge/join%20the%20community-on%20spectrum-7b16ff.svg
176
+
177
+ [ chat ] : https://spectrum.chat/unified/syntax-tree
139
178
140
179
[ npm ] : https://docs.npmjs.com/cli/install
141
180
142
181
[ license ] : license
143
182
144
183
[ author ] : https://wooorm.com
145
184
146
- [ hast ] : https://github.com/syntax-tree/hast
185
+ [ contributing ] : https://github.com/syntax-tree/.github/blob/master/contributing.md
147
186
148
- [ element ] : https://github.com/syntax-tree/hast#element
187
+ [ support ] : https://github.com/syntax-tree/.github/blob/master/support.md
149
188
150
- [ vdom ] : https://github.com/Matt-Esch/virtual-dom/tree /master/virtual-hyperscript
189
+ [ coc ] : https://github.com/syntax-tree/.github/blob /master/code-of-conduct.md
151
190
152
- [ hyperscript ] : https://github.com/dominictarr/ hyperscript
191
+ [ vdom ] : https://github.com/Matt-Esch/virtual-dom/tree/master/virtual- hyperscript
153
192
154
- [ h ] : #function-hname-attrs-children
193
+ [ hyperscript ] : https://github.com/hyperhype/hyperscript
155
194
156
- [ react ] : https://facebook.github.io/react /docs/glossary.html#react-elements
195
+ [ react ] : https://reactjs.org /docs/glossary.html#react-elements
157
196
158
197
[ vue ] : https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
159
198
160
199
[ hastscript ] : https://github.com/syntax-tree/hastscript
161
200
162
- [ contributing ] : https://github.com/syntax-tree/hast/blob/master/contributing.md
201
+ [ tree ] : https://github.com/syntax-tree/unist#tree
202
+
203
+ [ child ] : https://github.com/syntax-tree/unist#child
204
+
205
+ [ type ] : https://github.com/syntax-tree/unist#type
206
+
207
+ [ descendant ] : https://github.com/syntax-tree/unist#descendant
208
+
209
+ [ hast ] : https://github.com/syntax-tree/hast
210
+
211
+ [ node ] : https://github.com/syntax-tree/hast#nodes
163
212
164
- [ coc ] : https://github.com/syntax-tree/hast/blob/master/code-of-conduct.md
213
+ [ text ] : https://github.com/syntax-tree/hast#text
214
+
215
+ [ doctype ] : https://github.com/syntax-tree/hast#doctype
216
+
217
+ [ root ] : https://github.com/syntax-tree/hast#root
218
+
219
+ [ comment ] : https://github.com/syntax-tree/hast#comment
220
+
221
+ [ element ] : https://github.com/syntax-tree/hast#element
222
+
223
+ [ h ] : #function-hname-attrs-children
0 commit comments