Skip to content

Commit ec3f237

Browse files
committed
Mention fragment support & htm/mini in README.md
1 parent d60ed8d commit ec3f237

File tree

1 file changed

+28
-3
lines changed

1 file changed

+28
-3
lines changed

README.md

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ It uses standard JavaScript [Tagged Templates] and works in [all modern browsers
1515

1616
## `htm` by the numbers:
1717

18-
🐣 **< 700 bytes** when used directly in the browser
18+
🐣 **< 600 bytes** when used directly in the browser
1919

2020
⚛️ **< 500 bytes** when used with Preact _(thanks gzip 🌈)_
2121

22+
🥚 **< 400 byte** `htm/mini` version
23+
2224
🏅 **0 bytes** when compiled using [babel-plugin-htm]
2325

2426

@@ -42,6 +44,7 @@ Here's some ergonomic features you get for free that aren't present in JSX:
4244
- HTML's optional quotes: `<div class=foo>`
4345
- Component end-tags: `<${Footer}>footer content<//>`
4446
- Syntax highlighting and language support via the [lit-html VSCode extension] and [vim-jsx-pretty plugin].
47+
- Multiple root element (fragments): `<div /><div />`
4548

4649
## Installation
4750

@@ -107,6 +110,28 @@ console.log( html`<h1 id=hello>Hello world!</h1>` );
107110
// }
108111
```
109112

113+
If the template has multiple element at the root level
114+
the output is an array of `h` results:
115+
116+
```js
117+
console.log(html`
118+
<h1 id=hello>Hello</h1>
119+
<div class=world>World!</div>
120+
`);
121+
// [
122+
// {
123+
// type: 'h1',
124+
// props: { id: 'hello' },
125+
// children: ['Hello']
126+
// },
127+
// {
128+
// type: 'div',
129+
// props: { class: 'world' },
130+
// children: ['world!']
131+
// }
132+
// ]
133+
```
134+
110135
## Example
111136

112137
Curious to see what it all looks like? Here's a working app!
@@ -140,7 +165,7 @@ It's a single HTML file, and there's no build or tooling. You can edit it with n
140165
`;
141166
}
142167
}
143-
168+
144169
const Header = ({ name }) => html`<h1>${name} List</h1>`
145170
146171
const Footer = props => html`<footer ...${props} />`
@@ -213,7 +238,7 @@ The original goal for `htm` was to create a wrapper around Preact that felt natu
213238

214239
This meant giving up JSX, and the closest alternative was [Tagged Templates]. So, I wrote this library to patch up the differences between the two as much as possible. As it turns out, the technique is framework-agnostic, so it should work great with most Virtual DOM libraries.
215240

216-
As of 2.0.0, `htm` is stable, well-tested and ready for production use.
241+
As of 2.1.0, `htm` is stable, well-tested and ready for production use.
217242

218243
[Tagged Templates]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates
219244
[lit-html]: https://github.com/Polymer/lit-html

0 commit comments

Comments
 (0)