21
21
* [ ` Result ` ] ( #result )
22
22
* [ Syntax tree] ( #syntax-tree )
23
23
* [ JSX] ( #jsx )
24
- * [ Types] ( #types )
25
24
* [ Compatibility] ( #compatibility )
26
25
* [ Security] ( #security )
27
26
* [ Related] ( #related )
@@ -49,7 +48,8 @@ when creating any unist nodes and
49
48
## Install
50
49
51
50
This package is [ ESM only] [ github-gist-esm ] .
52
- In Node.js (version 16+), install with [ npm] [ npmjs-install ] :
51
+ In Node.js (version 16+),
52
+ install with [ npm] [ npmjs-install ] :
53
53
54
54
``` sh
55
55
npm install hastscript
@@ -146,10 +146,16 @@ Yields:
146
146
147
147
This package exports the identifiers [ ` h ` ] [ api-h ] and [ ` s ` ] [ api-s ] .
148
148
There is no default export.
149
+ It exports the additional [ TypeScript] [ ] types
150
+ [ ` Child ` ] [ api-child ] ,
151
+ [ ` Properties ` ] [ api-properties ] ,
152
+ and
153
+ [ ` Result ` ] [ api-result ] .
149
154
150
155
The export map supports the automatic JSX runtime.
151
- You can pass ` hastscript ` or ` hastscript/svg ` to your build tool (TypeScript,
152
- Babel, SWC) with an ` importSource ` option or similar.
156
+ You can pass ` hastscript ` or ` hastscript/svg ` to your build tool
157
+ (TypeScript, Babel, SWC)
158
+ with an ` importSource ` option or similar.
153
159
154
160
### ` h(selector?[, properties][, …children]) `
155
161
@@ -165,18 +171,22 @@ Create virtual **[hast][github-hast]** trees for HTML.
165
171
166
172
###### ` selector `
167
173
168
- Simple CSS selector (` string ` , optional).
169
- Can contain a tag name (` foo ` ), IDs (` #bar ` ), and classes (` .baz ` ).
170
- If the selector is a string but there is no tag name in it, ` h ` defaults to
171
- build a ` div ` element, and ` s ` to a ` g ` element.
172
- ` selector ` is parsed by
173
- [ ` hast-util-parse-selector ` ] [ github-hast-util-parse-selector ] .
174
+ Simple CSS selector
175
+ (` string ` , optional).
174
176
When string, builds an [ ` Element ` ] [ github-hast-element ] .
175
177
When nullish, builds a [ ` Root ` ] [ github-hast-root ] instead.
178
+ The selector can contain a tag name (` foo ` ),
179
+ IDs (` #bar ` ),
180
+ and classes (` .baz ` ).
181
+ If the selector is a string but there is no tag name in it then ` h ` defaults to
182
+ build a ` div ` element and ` s ` to a ` g ` element.
183
+ ` selector ` is parsed by
184
+ [ ` hast-util-parse-selector ` ] [ github-hast-util-parse-selector ] .
176
185
177
186
###### ` properties `
178
187
179
- Properties of the element ([ ` Properties ` ] [ api-properties ] , optional).
188
+ Properties of the element
189
+ ([ ` Properties ` ] [ api-properties ] , optional).
180
190
181
191
###### ` children `
182
192
@@ -194,8 +204,8 @@ otherwise [`Root`][github-hast-root].
194
204
Create virtual ** [ hast] [ github-hast ] ** trees for SVG.
195
205
196
206
Signatures, parameters, and return value are the same as ` h ` above.
197
- Importantly, the ` selector ` and ` properties ` parameters are interpreted as
198
- SVG.
207
+ Importantly,
208
+ the ` selector ` and ` properties ` parameters are interpreted as SVG.
199
209
200
210
### ` Child `
201
211
@@ -222,8 +232,8 @@ type Child =
222
232
### ` Properties `
223
233
224
234
Map of properties (TypeScript type).
225
- Keys should match either the HTML attribute name, or the DOM property name, but
226
- are case-insensitive.
235
+ Keys should match either the HTML attribute name or the DOM property name,
236
+ but are case-insensitive.
227
237
228
238
###### Type
229
239
@@ -262,16 +272,21 @@ This package can be used with JSX.
262
272
You should use the automatic JSX runtime set to ` hastscript ` or
263
273
` hastscript /svg ` .
264
274
265
- > 👉 **Note**: while ` h ` supports dots ( ` .` ) for classes or number signs ( ` #` )
266
- > for IDs in ` selector ` , those are not supported in JSX.
275
+ > 👉 **Note**
276
+ > while ` h ` supports dots ( ` .` ) for classes or number signs ( ` #` )
277
+ > for IDs in ` selector ` ,
278
+ > those are not supported in JSX.
267
279
268
- > 🪦 **Legacy**: you can also use the classic JSX runtime, but this is not
269
- > recommended.
270
- > To do so, import ` h ` (or ` s ` ) yourself and define it as the pragma (plus
271
- > set the fragment to ` null ` ).
280
+ > 🪦 **Legacy**:
281
+ > you can also use the classic JSX runtime,
282
+ > but this is not recommended.
283
+ > To do so,
284
+ > import ` h ` (or ` s ` ) yourself and define it as the pragma
285
+ > (plus set the fragment to ` null ` ).
272
286
273
- The Use example above can then be written like so, using inline pragmas, so
274
- that SVG can be used too:
287
+ The Use example above can then be written like so,
288
+ using inline pragmas,
289
+ so that SVG can be used too:
275
290
276
291
` example -html .jsx ` :
277
292
@@ -300,21 +315,15 @@ console.log(
300
315
)
301
316
` ` `
302
317
303
- ## Types
304
-
305
- This package is fully typed with [TypeScript][].
306
- It exports the additional types [ ` Child ` ][api-child],
307
- [ ` Properties ` ][api-properties], and
308
- [ ` Result ` ][api-result].
309
-
310
318
## Compatibility
311
319
312
320
Projects maintained by the unified collective are compatible with maintained
313
321
versions of Node.js.
314
322
315
- When we cut a new major release, we drop support for unmaintained versions of
316
- Node.
317
- This means we try to keep the current release line, ` hastscript @^9 ` ,
323
+ When we cut a new major release,
324
+ we drop support for unmaintained versions of Node.
325
+ This means we try to keep the current release line,
326
+ ` hastscript @9 ` ,
318
327
compatible with Node.js 16.
319
328
320
329
## Security
@@ -393,8 +402,9 @@ for ways to get started.
393
402
See [ ` support.md ` ] [ health-support ] for ways to get help.
394
403
395
404
This project has a [ code of conduct] [ health-coc ] .
396
- By interacting with this repository, organization, or community you agree to
397
- abide by its terms.
405
+ By interacting with this repository,
406
+ organization,
407
+ or community you agree to abide by its terms.
398
408
399
409
## License
400
410
0 commit comments