1 | # nanohtml
|
2 | [![npm version][2]][3] [![build status][4]][5]
|
3 | [![downloads][8]][9] [![js-standard-style][10]][11]
|
4 |
|
5 | HTML template strings for the Browser with support for Server Side
|
6 | Rendering in Node.
|
7 |
|
8 | ## Installation
|
9 | ```sh
|
10 | $ npm install nanohtml
|
11 | ```
|
12 |
|
13 | ## Usage
|
14 | ### Browser
|
15 | ```js
|
16 | var html = require('nanohtml')
|
17 |
|
18 | var el = html`
|
19 | <body>
|
20 | <h1>Hello planet</h1>
|
21 | </body>
|
22 | `
|
23 |
|
24 | document.body.appendChild(el)
|
25 | ```
|
26 |
|
27 | ### Node
|
28 | Node doesn't have a DOM available. So in order to render HTML we use string
|
29 | concatenation instead. This has the fun benefit of being quite efficient, which
|
30 | in turn means it's great for server rendering!
|
31 |
|
32 | ```js
|
33 | var html = require('nanohtml')
|
34 |
|
35 | var el = html`
|
36 | <body>
|
37 | <h1>Hello planet</h1>
|
38 | </body>
|
39 | `
|
40 |
|
41 | console.log(el.toString())
|
42 | ```
|
43 |
|
44 | ### Interpolating unescaped HTML
|
45 | By default all content inside template strings is escaped. This is great for
|
46 | strings, but not ideal if you want to insert HTML that's been returned from
|
47 | another function (for example: a markdown renderer). Use `nanohtml/raw` for
|
48 | to interpolate HTML directly.
|
49 |
|
50 | ```js
|
51 | var raw = require('nanohtml/raw')
|
52 | var html = require('nanohtml')
|
53 |
|
54 | var string = '<h1>This a regular string.</h1>'
|
55 | var el = html`
|
56 | <body>
|
57 | ${raw(string)}
|
58 | </body>
|
59 | `
|
60 |
|
61 | document.body.appendChild(el)
|
62 | ```
|
63 |
|
64 | ### Attaching event listeners
|
65 | ```js
|
66 | var html = require('nanohtml')
|
67 |
|
68 | var el = html`
|
69 | <body>
|
70 | <button onclick=${onclick}>
|
71 | Click Me
|
72 | </button>
|
73 | </body>
|
74 | `
|
75 |
|
76 | document.body.appendChild(el)
|
77 |
|
78 | function onclick (e) {
|
79 | console.log(`${e.target} was clicked`)
|
80 | }
|
81 | ```
|
82 |
|
83 | ## Static optimizations
|
84 | Parsing HTML has significant overhead. Being able to parse HTML statically,
|
85 | ahead of time can speed up rendering to be about twice as fast.
|
86 |
|
87 | ### Browserify
|
88 |
|
89 | #### From the command line
|
90 | ```sh
|
91 | $ browserify -t nanohtml index.js > bundle.js
|
92 | ```
|
93 |
|
94 | #### Programmatically
|
95 | ```js
|
96 | var browserify = require('browserify')
|
97 | var nanohtml = require('nanohtml')
|
98 | var path = require('path')
|
99 |
|
100 | var b = browserify(path.join(__dirname, 'index.js'))
|
101 | .transform(nanohtml)
|
102 |
|
103 | b.bundle().pipe(process.stdout)
|
104 | ```
|
105 |
|
106 | #### In package.json
|
107 | ```json
|
108 | {
|
109 | "name": "my-app",
|
110 | "private": true,
|
111 | "browserify": {
|
112 | "transform": [
|
113 | "nanohtml"
|
114 | ]
|
115 | },
|
116 | "dependencies": {
|
117 | "nanohtml": "^1.0.0"
|
118 | }
|
119 | }
|
120 | ```
|
121 |
|
122 | ### Webpack
|
123 | At the time of writing there's no Webpack loader yet. We'd love a contribution!
|
124 |
|
125 | ### Babel / Parcel
|
126 |
|
127 | Add nanohtml to your `.babelrc` config.
|
128 |
|
129 | Without options:
|
130 |
|
131 | ```js
|
132 | {
|
133 | "plugins": [
|
134 | "nanohtml"
|
135 | ]
|
136 | }
|
137 | ```
|
138 |
|
139 | With options:
|
140 |
|
141 | ```js
|
142 | {
|
143 | "plugins": [
|
144 | ["nanohtml", {
|
145 | "useImport": true
|
146 | }]
|
147 | ]
|
148 | }
|
149 | ```
|
150 |
|
151 | #### Options
|
152 |
|
153 | - `useImport` - Set to true to use `import` statements for injected modules.
|
154 | By default, `require` is used. Enable this if you're using Rollup.
|
155 | - `appendChildModule` - Import path to a module that contains an `appendChild`
|
156 | function. Defaults to `"nanohtml/lib/append-child"`.
|
157 |
|
158 | ## Attributions
|
159 | Shout out to [Shama](https://github.com/shama) and
|
160 | [Shuhei](https://github.com/shuhei) for their contributions to
|
161 | [Bel](https://github.com/shama/bel),
|
162 | [yo-yoify](https://github.com/shama/yo-yoify) and
|
163 | [pelo](https://github.com/shuhei/pelo). This module is based on their work, and
|
164 | wouldn't have been possible otherwise!
|
165 |
|
166 | ## See Also
|
167 | - [choojs/nanomorph](https://github.com/choojs/nanomorph)
|
168 |
|
169 | ## License
|
170 | [MIT](./LICENSE)
|
171 |
|
172 | [0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square
|
173 | [1]: https://nodejs.org/api/documentation.html#documentation_stability_index
|
174 | [2]: https://img.shields.io/npm/v/nanohtml.svg?style=flat-square
|
175 | [3]: https://npmjs.org/package/nanohtml
|
176 | [4]: https://img.shields.io/travis/choojs/nanohtml/master.svg?style=flat-square
|
177 | [5]: https://travis-ci.org/choojs/nanohtml
|
178 | [6]: https://img.shields.io/codecov/c/github/choojs/nanohtml/master.svg?style=flat-square
|
179 | [7]: https://codecov.io/github/choojs/nanohtml
|
180 | [8]: http://img.shields.io/npm/dt/nanohtml.svg?style=flat-square
|
181 | [9]: https://npmjs.org/package/nanohtml
|
182 | [10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
|
183 | [11]: https://github.com/feross/standard
|