You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -1243,7 +1243,7 @@ import * as router from 'hyperdom/router'
1243
1243
1244
1244
consthome=router.route('**')
1245
1245
1246
-
classThingextendshyperdom.RoutesApp {
1246
+
classThingextendshyperdom.RoutesComponent {
1247
1247
public title ='hello'
1248
1248
1249
1249
publicroutes () {
@@ -1263,7 +1263,7 @@ class Thing extends hyperdom.RoutesApp {
1263
1263
```typescript
1264
1264
import*ashyperdomfrom'hyperdom'
1265
1265
1266
-
classThingextendshyperdom.RenderApp {
1266
+
classThingextendshyperdom.RenderComponent {
1267
1267
public title ='hello'
1268
1268
1269
1269
publicrender () {
@@ -1272,71 +1272,6 @@ class Thing extends hyperdom.RenderApp {
1272
1272
}
1273
1273
```
1274
1274
1275
-
## Performance
1276
-
1277
-
Hyperdom is usually very fast. It's based on [virtual-dom](https://github.com/Matt-Esch/virtual-dom) which has excellent performance, several times faster than React. See [these benchmarks](http://vdom-benchmark.github.io/vdom-benchmark/). However, if you have very large and interactive pages there are several strategies you can employ to speed things up.
1278
-
1279
-
* Consider only rendering a part of the page on certain events. For this, you can use a [component](#components) for the portion of the page you want to refresh, then return a component or an array of components from the event handler.
1280
-
* Consider using [key](#keys) attributes for large dynamic lists of elements. Key attributes allow the diffing engine to spot differences inside lists of elements in some cases massively reducing the amount of DOM changes between renders.
1281
-
* For form inputs with bindings, especially text inputs that can refresh the page on each keypress, consider using `hyperdom.html.binding()` to not refresh, or only refresh a component.
1282
-
* Consider using a component with a `renderCacheKey()` method, to have finer control over when the component re-renders. You can reduce the total render time by not rendering portions of the page that don't change very often. When the `renderCacheKey()` result changes from one render to the next, the component will be re-rendered. When it doesn't change, the component won't be re-rendered.
1283
-
* For parts of the page that don't ever change, you can pre-render the VDOM statically once and return the same VDOM on each render.
By using [transform-react-jsx-source](http://babeljs.io/docs/plugins/transform-react-jsx-source/) hyperdom will generate `data-file-name` and `data-line-number` attributes pointing to the file that generated the DOM.
Debugging features and deprecation warnings can be turned off for production builds. Hyperdom source code checks the `NODE_ENV` environment constiable, and when set to `production` will turn these features off.
1310
-
1311
-
To make a production build with webpack, use `webpack -p`.
1312
-
1313
-
To make a production build with browserify, use [envify](https://github.com/hughsk/envify) and ensure `NODE_ENV=production`, for e.g. `browserify -t [ envify --NODE_ENV production ] ...` and then use a minifier like [uglify](https://github.com/mishoo/UglifyJS2) to strip the disabled code.
1314
-
1315
-
## Common Errors
1316
-
1317
-
### Outside Render Cycle
1318
-
1319
-
> You cannot create virtual-dom event handlers outside a render function
1320
-
1321
-
This usually happens when you try to create virtual dom outside of a render function, which is ok, but if you try to add event handlers (`onclick` etc, or otherwise have attributes set to functions) then you'll see this error. This is because outside of the render cycle, there's no way for the event handlers to know which attachment to refresh - you could have several on a page at once.
1322
-
1323
-
Another cause of this error is if you have more than one instance of the hyperdom module loaded. This can occur if you have an NPM listing like this:
1324
-
1325
-
```
1326
-
my-app@1.0.0/Users/bob/dev/my-app
1327
-
├── hyperdom@1.19.1
1328
-
├── my-hyperdom-component@1.0.0
1329
-
│ ├── hyperdom@1.19.1
1330
-
```
1331
-
1332
-
With `my-hyperdom-component` depending on another `hyperdom`. Better to have `my-hyperdom-component` have a `peerDependency` on hyperdom, allowing it to use the `hyperdom` under `my-app`.
1333
-
1334
-
### Refresh Outside Render Cycle
1335
-
1336
-
> Please assign hyperdom.html.refresh during a render cycle if you want to use it in event handlers
1337
-
1338
-
This can occur if you use `hyperdom.html.refresh`, or `h.refresh` outside of a render cycle, for example, in an event handler or after a `setTimeout`. This is easily fixed, take a look at [Refresh Function](#refresh-function).
1339
-
1340
1275
## API
1341
1276
1342
1277
### Rendering the Virtual DOM
@@ -1461,6 +1396,71 @@ attachment.remove();
1461
1396
1462
1397
Destroys the DOM, running any `onremove` handlers found in components. This will remove the DOM element.
1463
1398
1399
+
## Performance
1400
+
1401
+
Hyperdom is usually very fast. It's based on [virtual-dom](https://github.com/Matt-Esch/virtual-dom) which has excellent performance, several times faster than React. See [these benchmarks](http://vdom-benchmark.github.io/vdom-benchmark/). However, if you have very large and interactive pages there are several strategies you can employ to speed things up.
1402
+
1403
+
* Consider only rendering a part of the page on certain events. For this, you can use a [component](#components) for the portion of the page you want to refresh, then return a component or an array of components from the event handler.
1404
+
* Consider using [key](#keys) attributes for large dynamic lists of elements. Key attributes allow the diffing engine to spot differences inside lists of elements in some cases massively reducing the amount of DOM changes between renders.
1405
+
* For form inputs with bindings, especially text inputs that can refresh the page on each keypress, consider using `hyperdom.html.binding()` to not refresh, or only refresh a component.
1406
+
* Consider using a component with a `renderCacheKey()` method, to have finer control over when the component re-renders. You can reduce the total render time by not rendering portions of the page that don't change very often. When the `renderCacheKey()` result changes from one render to the next, the component will be re-rendered. When it doesn't change, the component won't be re-rendered.
1407
+
* For parts of the page that don't ever change, you can pre-render the VDOM statically once and return the same VDOM on each render.
By using [transform-react-jsx-source](http://babeljs.io/docs/plugins/transform-react-jsx-source/) hyperdom will generate `data-file-name` and `data-line-number` attributes pointing to the file that generated the DOM.
Debugging features and deprecation warnings can be turned off for production builds. Hyperdom source code checks the `NODE_ENV` environment constiable, and when set to `production` will turn these features off.
1434
+
1435
+
To make a production build with webpack, use `webpack -p`.
1436
+
1437
+
To make a production build with browserify, use [envify](https://github.com/hughsk/envify) and ensure `NODE_ENV=production`, for e.g. `browserify -t [ envify --NODE_ENV production ] ...` and then use a minifier like [uglify](https://github.com/mishoo/UglifyJS2) to strip the disabled code.
1438
+
1439
+
## Common Errors
1440
+
1441
+
### Outside Render Cycle
1442
+
1443
+
> You cannot create virtual-dom event handlers outside a render function
1444
+
1445
+
This usually happens when you try to create virtual dom outside of a render function, which is ok, but if you try to add event handlers (`onclick` etc, or otherwise have attributes set to functions) then you'll see this error. This is because outside of the render cycle, there's no way for the event handlers to know which attachment to refresh - you could have several on a page at once.
1446
+
1447
+
Another cause of this error is if you have more than one instance of the hyperdom module loaded. This can occur if you have an NPM listing like this:
1448
+
1449
+
```
1450
+
my-app@1.0.0/Users/bob/dev/my-app
1451
+
├── hyperdom@1.19.1
1452
+
├── my-hyperdom-component@1.0.0
1453
+
│ ├── hyperdom@1.19.1
1454
+
```
1455
+
1456
+
With `my-hyperdom-component` depending on another `hyperdom`. Better to have `my-hyperdom-component` have a `peerDependency` on hyperdom, allowing it to use the `hyperdom` under `my-app`.
1457
+
1458
+
### Refresh Outside Render Cycle
1459
+
1460
+
> Please assign hyperdom.html.refresh during a render cycle if you want to use it in event handlers
1461
+
1462
+
This can occur if you use `hyperdom.html.refresh`, or `h.refresh` outside of a render cycle, for example, in an event handler or after a `setTimeout`. This is easily fixed, take a look at [Refresh Function](#refresh-function).
0 commit comments