github-forks
/
snabbdom
mirror of https://github.com/snabbdom/snabbdom.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update readme

Browse Source
pull/3/head
paldepind 10 years ago
parent 23344df6b8
commit 7f7fab3bec
1 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File

43
README.md
Unescape Escape View File

@ -2,7 +2,7 @@
A virtual DOM library with focus on simplicity, modularity, powerful features A virtual DOM library with focus on simplicity, modularity, powerful features
and performance. and performance.
# Table of contents ## Table of contents
* [Introduction](#introduction) * [Introduction](#introduction)
* [Features](#features) * [Features](#features)
@ -11,7 +11,7 @@ and performance.
* [Core documentation](#core-documentation) * [Core documentation](#core-documentation)
* [Modules documentation](#modules-documentation) * [Modules documentation](#modules-documentation)
# Introduction ## Introduction
Snabbdom consists of an extremely simple, performant and extensible core that Snabbdom consists of an extremely simple, performant and extensible core that
is only ≈ 200 SLOC. It offers a modular architecture with rich functionality is only ≈ 200 SLOC. It offers a modular architecture with rich functionality
@ -23,7 +23,7 @@ functionality you want. Alternatively you can just use the default extensions
and get a virtual DOM library with high performance, small size and all the and get a virtual DOM library with high performance, small size and all the
features listed below. features listed below.
# Features ## Features
* Core features * Core features
* About 200 SLOC – you could easily read through the entire core and fully * About 200 SLOC – you could easily read through the entire core and fully
@ -40,7 +40,7 @@ features listed below.
* Powerful event listener functionality * Powerful event listener functionality
* Thunks to optimize the diff and patch process even further * Thunks to optimize the diff and patch process even further
# Inline example ## Inline example
```javascript ```javascript
var snabbdom = require('snabbdom'); var snabbdom = require('snabbdom');
@ -61,17 +61,17 @@ var container = document.getElementById('container');
patch(container, vnode); patch(container, vnode);
``` ```
# Examples ## Examples
* [Animated reordering of elements](http://paldepind.github.io/snabbdom/examples/reorder-animation/) * [Animated reordering of elements](http://paldepind.github.io/snabbdom/examples/reorder-animation/)
* [Hero transitions](http://paldepind.github.io/snabbdom/examples/hero/) * [Hero transitions](http://paldepind.github.io/snabbdom/examples/hero/)
# Core documentation ## Core documentation
The core of Snabbdom provides only the most essential functionality. It is The core of Snabbdom provides only the most essential functionality. It is
designed to be as simple as possible while still being fast and extendable. designed to be as simple as possible while still being fast and extendable.
## `snabbdom.init` ### `snabbdom.init`
The core exposes only one single function `snabbdom.init`. `init` takes a list of The core exposes only one single function `snabbdom.init`. `init` takes a list of
modules and returns a `patch` function that uses the specified set of modules. modules and returns a `patch` function that uses the specified set of modules.
@ -83,7 +83,7 @@ var patch = snabbdom.init([
]); ]);
``` ```
## `patch` ### `patch`
The `patch` function returned by `init` takes two arguments. The first is a DOM The `patch` function returned by `init` takes two arguments. The first is a DOM
element or a vnode representing the current view. The second is a vnode element or a vnode representing the current view. The second is a vnode
@ -93,7 +93,7 @@ representing the new view.
patch(oldVnode, newVnode); patch(oldVnode, newVnode);
``` ```
## `snabbdom/h` ### `snabbdom/h`
It is recommended that you use `snabbdom/h` to create VNodes. `h` accepts a a It is recommended that you use `snabbdom/h` to create VNodes. `h` accepts a a
tag/selector as a string, an optional data object and an option string or array of children. tag/selector as a string, an optional data object and an option string or array of children.
@ -106,9 +106,19 @@ var vnode = h('div', {style: {color: '#000'}}, [
]); ]);
``` ```
## Hooks ### Hooks
# Modules documentation | Name | Triggered when | Arguments to callback |
| `pre` | the patch process begins. | |
| `create` | a DOM element has been created based on a VNode. | `emptyVNode, createdVnode` |
| `insert` | an element has been inserted into the DOM. | `insertedVnode` |
| `patch` | an element is about to be patched. | `oldVnode, newVnode` |
| `update` | an element is being updated. | `oldVnode, newVnode` |
| `remove` | an element is directly being removed from the DOM. | `vnode, removeCallback` |
| `destroy` | an element is begin removed from the DOM or it's parent is. | `vnode` |
| `post` | the patch process is done. | |
## Modules documentation
This describes the core modules. This describes the core modules.
@ -125,6 +135,8 @@ h('a', {class: {active: true, selected: false}}, 'Toggle');
### The props module ### The props module
Allows you to set properties on DOM elements.
```javascript ```javascript
h('a', {props: {href: '/foo'}, 'Go to Foo'); h('a', {props: {href: '/foo'}, 'Go to Foo');
``` ```
@ -142,6 +154,9 @@ h('span', {
#### Delayed properties #### Delayed properties
You can specify properties as being delayed. Whenver these properties change
the change is not applied until after the next frame.
```javascript ```javascript
h('span', { h('span', {
style: {opacity: '0', transitionDuration: 'opacity 1s', delayed: {opacity: '1'}} style: {opacity: '0', transitionDuration: 'opacity 1s', delayed: {opacity: '1'}}
@ -166,12 +181,6 @@ h('span', {
}, 'It\'s better to fade out than to burn away'); }, 'It\'s better to fade out than to burn away');
``` ```
#### Destroy properties
### Eventlisteners module ### Eventlisteners module
#### Destroy properties
### Eventlisteners module

Write Preview
Loading…
Cancel
Save