Skip to content

Commit 30c3006

Browse files
wooormwooorm
committed
Refactor prose
1 parent bf722a4 commit 30c3006

File tree

1 file changed

+109
-63
lines changed

1 file changed

+109
-63
lines changed

‎readme.md

+109-63
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
1-
# hastscript [![Build][build-badge]][build] [![Coverage][coverage-badge]][coverage] [![Downloads][downloads-badge]][downloads] [![Size][size-badge]][size] [![Chat][chat-badge]][chat]
1+
# hastscript
22

3-
[Hyperscript][] (and [`virtual-hyperscript`][virtual-hyperscript])
4-
compatible DSL for creating virtual [HAST][] trees in HTML and SVG.
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]
510

6-
## Installation
11+
[**hast**][hast] utility to create [*trees*][tree] in HTML or SVG.
12+
13+
Similar to [hyperscript][] (and [`virtual-hyperscript`][virtual-hyperscript])
14+
but for [**hast**][hast].
15+
16+
## Install
717

818
[npm][]:
919

10-
```bash
20+
```sh
1121
npm install hastscript
1222
```
1323

1424
## Usage
1525

16-
```javascript
26+
```js
1727
var h = require('hastscript')
1828
var s = require('hastscript/svg')
1929

20-
// Child nodes as an array
30+
// Children as an array:
2131
console.log(
2232
h('.foo#some-id', [
2333
h('span', 'some text'),
@@ -29,7 +39,7 @@ console.log(
2939
])
3040
)
3141

32-
// Child nodes as arguments
42+
// Children as arguments:
3343
console.log(
3444
h(
3545
'form',
@@ -40,6 +50,7 @@ console.log(
4050
)
4151
)
4252

53+
// SVG:
4354
console.log(
4455
s('svg', {xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 500 500'}, [
4556
s('title', 'SVG `<circle>` element'),
@@ -51,52 +62,75 @@ console.log(
5162
Yields:
5263

5364
```js
54-
{ type: 'element',
65+
{
66+
type: 'element',
5567
tagName: 'div',
56-
properties: { className: [ 'foo' ], id: 'some-id' },
57-
children:
58-
[ { type: 'element',
59-
tagName: 'span',
60-
properties: {},
61-
children: [ { type: 'text', value: 'some text' } ] },
62-
{ type: 'element',
63-
tagName: 'input',
64-
properties: { type: 'text', value: 'foo' },
65-
children: [] },
66-
{ type: 'element',
67-
tagName: 'a',
68-
properties: { className: [ 'alpha', 'bravo', 'charlie' ], download: true },
69-
children:
70-
[ { type: 'text', value: 'delta' },
71-
{ type: 'text', value: 'echo' } ] } ] }
72-
{ type: 'element',
68+
properties: {className: ['foo'], id: 'some-id'},
69+
children: [
70+
{
71+
type: 'element',
72+
tagName: 'span',
73+
properties: {},
74+
children: [{type: 'text', value: 'some text'}]
75+
},
76+
{
77+
type: 'element',
78+
tagName: 'input',
79+
properties: {type: 'text', value: 'foo'},
80+
children: []
81+
},
82+
{
83+
type: 'element',
84+
tagName: 'a',
85+
properties: {className: ['alpha', 'bravo', 'charlie'], download: true},
86+
children: [{type: 'text', value: 'delta'}, {type: 'text', value: 'echo'}]
87+
}
88+
]
89+
}
90+
{
91+
type: 'element',
7392
tagName: 'form',
74-
properties: { method: 'POST' },
75-
children:
76-
[ { type: 'element',
77-
tagName: 'input',
78-
properties: { type: 'text', name: 'foo' },
79-
children: [] },
80-
{ type: 'element',
81-
tagName: 'input',
82-
properties: { type: 'text', name: 'bar' },
83-
children: [] },
84-
{ type: 'element',
85-
tagName: 'input',
86-
properties: { type: 'submit', value: 'send' },
87-
children: [] } ] }
88-
{ type: 'element',
93+
properties: {method: 'POST'},
94+
children: [
95+
{
96+
type: 'element',
97+
tagName: 'input',
98+
properties: {type: 'text', name: 'foo'},
99+
children: []
100+
},
101+
{
102+
type: 'element',
103+
tagName: 'input',
104+
properties: {type: 'text', name: 'bar'},
105+
children: []
106+
},
107+
{
108+
type: 'element',
109+
tagName: 'input',
110+
properties: {type: 'submit', value: 'send'},
111+
children: []
112+
}
113+
]
114+
}
115+
{
116+
type: 'element',
89117
tagName: 'svg',
90-
properties: { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 500 500' },
91-
children:
92-
[ { type: 'element',
93-
tagName: 'title',
94-
properties: {},
95-
children: [ { type: 'text', value: 'SVG `<circle>` element' } ] },
96-
{ type: 'element',
97-
tagName: 'circle',
98-
properties: { cx: 120, cy: 120, r: 100 },
99-
children: [] } ] }
118+
properties: {xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 500 500'},
119+
children: [
120+
{
121+
type: 'element',
122+
tagName: 'title',
123+
properties: {},
124+
children: [{type: 'text', value: 'SVG `<circle>` element'}]
125+
},
126+
{
127+
type: 'element',
128+
tagName: 'circle',
129+
properties: {cx: 120, cy: 120, r: 100},
130+
children: []
131+
}
132+
]
133+
}
100134
```
101135

102136
## API
@@ -111,8 +145,8 @@ DSL to create virtual [HAST][] trees for HTML or SVG.
111145

112146
###### `selector`
113147

114-
Simple CSS selector (`string`, optional). Can contain a tag name (`foo`), IDs
115-
(`#bar`), and classes (`.baz`).
148+
Simple CSS selector (`string`, optional).
149+
Can contain a tag name (`foo`), IDs (`#bar`), and classes (`.baz`).
116150
If there is no tag name in the selector, `h` defaults to a `div` element,
117151
and `s` to a `g` element.
118152

@@ -123,19 +157,21 @@ Map of properties (`Object.<*>`, optional).
123157
###### `children`
124158

125159
(Lists of) child nodes (`string`, `Node`, `Array.<string|Node>`, optional).
126-
When strings are encountered, they are normalised to [`text`][text] nodes.
160+
When strings are encountered, they are mapped to [`text`][text] nodes.
127161

128162
##### Returns
129163

130164
[`Element`][element].
131165

132166
## Contribute
133167

134-
See [`contributing.md` in `syntax-tree/hast`][contributing] for ways to get
168+
See [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get
135169
started.
170+
See [`support.md`][support] for ways to get help.
136171

137-
This organisation has a [Code of Conduct][coc]. By interacting with this
138-
repository, organisation, or community you agree to abide by its terms.
172+
This project has a [Code of Conduct][coc].
173+
By interacting with this repository, organisation, or community you agree to
174+
abide by its terms.
139175

140176
## License
141177

@@ -159,26 +195,36 @@ repository, organisation, or community you agree to abide by its terms.
159195

160196
[size]: https://bundlephobia.com/result?p=hastscript
161197

198+
[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
199+
200+
[backers-badge]: https://opencollective.com/unified/backers/badge.svg
201+
202+
[collective]: https://opencollective.com/unified
203+
162204
[chat-badge]: https://img.shields.io/badge/join%20the%20community-on%20spectrum-7b16ff.svg
163205

164-
[chat]: https://spectrum.chat/unified/rehype
206+
[chat]: https://spectrum.chat/unified/syntax-tree
165207

166208
[npm]: https://docs.npmjs.com/cli/install
167209

168210
[license]: license
169211

170212
[author]: https://wooorm.com
171213

172-
[hast]: https://github.com/syntax-tree/hast
214+
[contributing]: https://github.com/syntax-tree/.github/blob/master/contributing.md
173215

174-
[element]: https://github.com/syntax-tree/hast#element
216+
[support]: https://github.com/syntax-tree/.github/blob/master/support.md
217+
218+
[coc]: https://github.com/syntax-tree/.github/blob/master/code-of-conduct.md
175219

176220
[virtual-hyperscript]: https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript
177221

178222
[hyperscript]: https://github.com/dominictarr/hyperscript
179223

180-
[text]: https://github.com/syntax-tree/unist#text
224+
[tree]: https://github.com/syntax-tree/unist#tree
181225

182-
[contributing]: https://github.com/syntax-tree/hast/blob/master/contributing.md
226+
[hast]: https://github.com/syntax-tree/hast
227+
228+
[element]: https://github.com/syntax-tree/hast#element
183229

184-
[coc]: https://github.com/syntax-tree/hast/blob/master/code-of-conduct.md
230+
[text]: https://github.com/syntax-tree/hast#text

0 commit comments

Comments
 (0)