Skip to content

Commit 3614977

Browse files
authored
Merge pull request #72 from jviide/readme-update
Mention fragment support & htm/mini in README.md
2 parents d60ed8d + 22cff90 commit 3614977

File tree

1 file changed

+29
-4
lines changed

1 file changed

+29
-4
lines changed

README.md

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ 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-
🏅 **0 bytes** when compiled using [babel-plugin-htm]
22+
🥚 **< 400 byte** `htm/mini` version
23+
24+
🏅 **0 bytes** if compiled using [babel-plugin-htm]
2325

2426

2527
## Syntax: like JSX but also lit
@@ -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)