Skip to content

Commit 9cd8e21

Browse files
committed
Add improved docs
1 parent a0aab93 commit 9cd8e21

File tree

1 file changed

+96
-61
lines changed

1 file changed

+96
-61
lines changed

readme.md

+96-61
Original file line numberDiff line numberDiff line change
@@ -10,44 +10,90 @@
1010
[![Backers][backers-badge]][collective]
1111
[![Chat][chat-badge]][chat]
1212

13-
[**hast**][hast] utility with equivalents `querySelector`, `querySelectorAll`,
13+
[hast][] utility with equivalents for `querySelector`, `querySelectorAll`,
1414
and `matches`.
1515

16+
## Contents
17+
18+
* [What is this?](#what-is-this)
19+
* [When should I use this?](#when-should-i-use-this)
20+
* [Install](#install)
21+
* [API](#api)
22+
* [`matches(selector, node[, space])`](#matchesselector-node-space)
23+
* [`select(selector, tree[, space])`](#selectselector-tree-space)
24+
* [`selectAll(selector, tree[, space])`](#selectallselector-tree-space)
25+
* [Support](#support)
26+
* [Unsupported](#unsupported)
27+
* [Types](#types)
28+
* [Compatibility](#compatibility)
29+
* [Security](#security)
30+
* [Related](#related)
31+
* [Contribute](#contribute)
32+
* [License](#license)
33+
34+
## What is this?
35+
36+
This package lets you find nodes in a tree, similar to how `querySelector`,
37+
`querySelectorAll`, and `matches` work with the DOM.
38+
1639
One notable difference between DOM and hast is that DOM nodes have references
1740
to their parents, meaning that `document.body.matches(':last-child')` can
18-
be evaluated.
41+
be evaluated to check whether the body is the last child of its parent.
1942
This information is not stored in hast, so selectors like that don’t work.
2043

21-
[View the list of supported selectors »][support]
44+
## When should I use this?
2245

23-
## Install
46+
This is a small utility that is quite useful, but is rather slow if you use it a
47+
lot.
48+
For each call, it has to walk the entire tree.
49+
In some cases, walking the tree once with [`unist-util-visit`][unist-util-visit]
50+
is smarter, such as when you want to change certain nodes.
51+
On the other hand, this is quite powerful and fast enough for many other cases.
2452

25-
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
26-
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
53+
This utility is similar to [`unist-util-select`][unist-util-select], which can
54+
find and match any unist node.
55+
56+
## Install
2757

28-
[npm][]:
58+
This package is [ESM only][esm].
59+
In Node.js (version 12.20+, 14.14+, 16.0+, 18.0+), install with [npm][]:
2960

3061
```sh
3162
npm install hast-util-select
3263
```
3364

65+
In Deno with [`esm.sh`][esmsh]:
66+
67+
```js
68+
import {matches, select, selectAll} from "https://esm.sh/hast-util-select@5"
69+
```
70+
71+
In browsers with [`esm.sh`][esmsh]:
72+
73+
```html
74+
<script type="module">
75+
import {matches, select, selectAll} from "https://esm.sh/hast-util-select@5?bundle"
76+
</script>
77+
```
78+
3479
## API
3580

36-
This package exports the following identifiers: `matches`, `select`, and
37-
`selectAll`.
81+
This package exports the identifiers `matches`, `select`, and `selectAll`.
3882
There is no default export.
3983

4084
### `matches(selector, node[, space])`
4185

42-
Check that the given `node` matches `selector`.
43-
Returns boolean, whether the node matches or not.
86+
Check that the given `node` ([`Node`][node], should be [element][]) matches the
87+
CSS selector `selector` (`string`, stuff like `a, b` is also supported).
88+
Also accepts a `space` (enum, `'svg'` or `'html'`, default: `'html'`)
89+
Returns whether the node matches or not (`boolean`).
4490

4591
This only checks the element itself, not the surrounding tree.
4692
Thus, nesting in selectors is not supported (`p b`, `p > b`), neither are
4793
selectors like `:first-child`, etc.
4894
This only checks that the given element matches the selector.
4995

50-
##### Use
96+
###### Example
5197

5298
```js
5399
import {h} from 'hastscript'
@@ -63,26 +109,14 @@ matches('[lang|=en]', h('a', {lang: 'en-GB'})) // => true
63109
// ...
64110
```
65111

66-
##### Parameters
67-
68-
* `selector` (`string`)
69-
— CSS selectors (`,` is also supported)
70-
* `node` ([`Node`][node])
71-
— Thing to check, could be anything, but should be an [*element*][element]
72-
* `space` (enum, `'svg'` or `'html'`, default: `'html'`)
73-
— Which space the node exists in
74-
75-
##### Returns
76-
77-
`boolean` — Whether the node matches the selector.
78-
79112
### `select(selector, tree[, space])`
80113

81-
Select the first `node` matching `selector` in the given `tree` (could be the
82-
tree itself).
83-
Searches the [*tree*][tree] in [*preorder*][preorder].
114+
Select the first [element][] (or `null`) matching the CSS selector `selector` in
115+
the given `tree` ([`Node`][node]), which could be the tree itself.
116+
Searches the [tree][] in *[preorder][]*.
117+
Also accepts a `space` (enum, `'svg'` or `'html'`, default: `'html'`)
84118

85-
##### Use
119+
###### Example
86120

87121
```js
88122
import {h} from 'hastscript'
@@ -111,24 +145,14 @@ Yields:
111145
children: [ { type: 'text', value: 'Delta' } ] }
112146
```
113147

114-
##### Parameters
115-
116-
* `selector` (`string`) — CSS selectors (`,` is also supported)
117-
* `tree` ([`Node`][node]) — [*Tree*][tree] to search
118-
* `space` (enum, `'svg'` or `'html'`, default: `'html'`)
119-
— Which space the tree exists in
120-
121-
##### Returns
122-
123-
[`Element?`][element] — The found element, if any.
124-
125148
### `selectAll(selector, tree[, space])`
126149

127-
Select all nodes matching `selector` in the given `tree` (could include the tree
128-
itself).
129-
Searches the [*tree*][tree] in [*preorder*][preorder].
150+
Select all [element][]s (`Array<Element>`) matching the CSS selector `selector`
151+
in the given `tree` ([`Node`][node]), which could include the tree itself.
152+
Searches the [tree][] in *[preorder][]*.
153+
Also accepts a `space` (enum, `'svg'` or `'html'`, default: `'html'`)
130154

131-
##### Use
155+
###### Example
132156

133157
```js
134158
import {h} from 'hastscript'
@@ -163,17 +187,6 @@ Yields:
163187
children: [ { type: 'text', value: 'Foxtrot' } ] } ]
164188
```
165189

166-
##### Parameters
167-
168-
* `selector` (`string`) — CSS selectors (`,` is also supported)
169-
* `tree` ([`Node`][node]) — [*Tree*][tree] to search
170-
* `space` (enum, `'svg'` or `'html'`, default: `'html'`)
171-
— Which space the tree exists in
172-
173-
##### Returns
174-
175-
[`Array<Element>`][element] — All found elements, if any.
176-
177190
## Support
178191

179192
* [x] `*` (universal selector)
@@ -282,6 +295,18 @@ Yields:
282295
* § — Not very interested in writing / including the code for this
283296
* ‖ — Too new, the spec is still changing
284297

298+
## Types
299+
300+
This package is fully typed with [TypeScript][].
301+
It exports the additional type `Space`.
302+
303+
## Compatibility
304+
305+
Projects maintained by the unified collective are compatible with all maintained
306+
versions of Node.js.
307+
As of now, that is Node.js 12.20+, 14.14+, 16.0+, and 18.0+.
308+
Our projects sometimes work with older versions, but this is not guaranteed.
309+
285310
## Security
286311

287312
`hast-util-select` does not change the syntax tree so there are no openings for
@@ -300,8 +325,8 @@ Yields:
300325

301326
## Contribute
302327

303-
See [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get
304-
started.
328+
See [`contributing.md`][contributing] in [`syntax-tree/.github`][health] for
329+
ways to get started.
305330
See [`support.md`][help] for ways to get help.
306331

307332
This project has a [code of conduct][coc].
@@ -342,15 +367,23 @@ abide by its terms.
342367

343368
[npm]: https://docs.npmjs.com/cli/install
344369

370+
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
371+
372+
[esmsh]: https://esm.sh
373+
374+
[typescript]: https://www.typescriptlang.org
375+
345376
[license]: license
346377

347378
[author]: https://wooorm.com
348379

349-
[contributing]: https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
380+
[health]: https://github.com/syntax-tree/.github
350381

351-
[help]: https://github.com/syntax-tree/.github/blob/HEAD/support.md
382+
[contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md
352383

353-
[coc]: https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
384+
[help]: https://github.com/syntax-tree/.github/blob/main/support.md
385+
386+
[coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
354387

355388
[tree]: https://github.com/syntax-tree/unist#tree
356389

@@ -364,4 +397,6 @@ abide by its terms.
364397

365398
[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
366399

367-
[support]: #support
400+
[unist-util-visit]: https://github.com/syntax-tree/unist-util-visit
401+
402+
[unist-util-select]: https://github.com/syntax-tree/unist-util-select

0 commit comments

Comments
 (0)