Comparing version 0.5.0 to 0.5.1
9
h.js
var VNode = require('./vnode'); | ||
var is = require('./is'); | ||
function addNS(data, children) { | ||
function addNS(data, children, sel) { | ||
data.ns = 'http://www.w3.org/2000/svg'; | ||
if (children !== undefined) { | ||
if (sel !== 'foreignObject' && children !== undefined) { | ||
for (var i = 0; i < children.length; ++i) { | ||
addNS(children[i].data, children[i].children); | ||
addNS(children[i].data, children[i].children, children[i].sel); | ||
} | ||
@@ -30,5 +31,5 @@ } | ||
if (sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g') { | ||
addNS(data, children); | ||
addNS(data, children, sel); | ||
} | ||
return VNode(sel, data, children, text, undefined); | ||
}; |
@@ -1,8 +0,8 @@ | ||
var booleanAttrs = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "compact", "controls", "declare", | ||
"default", "defaultchecked", "defaultmuted", "defaultselected", "defer", "disabled", "draggable", | ||
"enabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "itemscope", "loop", "multiple", | ||
"muted", "nohref", "noresize", "noshade", "novalidate", "nowrap", "open", "pauseonexit", "readonly", | ||
"required", "reversed", "scoped", "seamless", "selected", "sortable", "spellcheck", "translate", | ||
var booleanAttrs = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "compact", "controls", "declare", | ||
"default", "defaultchecked", "defaultmuted", "defaultselected", "defer", "disabled", "draggable", | ||
"enabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "itemscope", "loop", "multiple", | ||
"muted", "nohref", "noresize", "noshade", "novalidate", "nowrap", "open", "pauseonexit", "readonly", | ||
"required", "reversed", "scoped", "seamless", "selected", "sortable", "spellcheck", "translate", | ||
"truespeed", "typemustmatch", "visible"]; | ||
var booleanAttrsDict = {}; | ||
@@ -12,7 +12,11 @@ for(var i=0, len = booleanAttrs.length; i < len; i++) { | ||
} | ||
function updateAttrs(oldVnode, vnode) { | ||
var key, cur, old, elm = vnode.elm, | ||
oldAttrs = oldVnode.data.attrs || {}, attrs = vnode.data.attrs || {}; | ||
oldAttrs = oldVnode.data.attrs, attrs = vnode.data.attrs; | ||
if (!oldAttrs && !attrs) return; | ||
oldAttrs = oldAttrs || {}; | ||
attrs = attrs || {}; | ||
// update modified attributes, add new attributes | ||
@@ -19,0 +23,0 @@ for (key in attrs) { |
function updateClass(oldVnode, vnode) { | ||
var cur, name, elm = vnode.elm, | ||
oldClass = oldVnode.data.class || {}, | ||
klass = vnode.data.class || {}; | ||
oldClass = oldVnode.data.class, | ||
klass = vnode.data.class; | ||
if (!oldClass && !klass) return; | ||
oldClass = oldClass || {}; | ||
klass = klass || {}; | ||
for (name in oldClass) { | ||
@@ -6,0 +11,0 @@ if (!klass[name]) { |
function updateDataset(oldVnode, vnode) { | ||
var elm = vnode.elm, | ||
oldDataset = oldVnode.data.dataset || {}, | ||
dataset = vnode.data.dataset || {}, | ||
oldDataset = oldVnode.data.dataset, | ||
dataset = vnode.data.dataset, | ||
key | ||
if (!oldDataset && !dataset) return; | ||
oldDataset = oldDataset || {}; | ||
dataset = dataset || {}; | ||
for (key in oldDataset) { | ||
@@ -8,0 +12,0 @@ if (!dataset[key]) { |
@@ -20,4 +20,8 @@ var is = require('../is'); | ||
var name, cur, old, elm = vnode.elm, | ||
oldOn = oldVnode.data.on || {}, on = vnode.data.on; | ||
if (!on) return; | ||
oldOn = oldVnode.data.on, on = vnode.data.on; | ||
if (!on && !oldOn) return; | ||
on = on || {}; | ||
oldOn = oldOn || {}; | ||
for (name in on) { | ||
@@ -24,0 +28,0 @@ cur = on[name]; |
function updateProps(oldVnode, vnode) { | ||
var key, cur, old, elm = vnode.elm, | ||
oldProps = oldVnode.data.props || {}, props = vnode.data.props || {}; | ||
oldProps = oldVnode.data.props, props = vnode.data.props; | ||
if (!oldProps && !props) return; | ||
oldProps = oldProps || {}; | ||
props = props || {}; | ||
for (key in oldProps) { | ||
@@ -5,0 +10,0 @@ if (!props[key]) { |
@@ -10,5 +10,10 @@ var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout; | ||
var cur, name, elm = vnode.elm, | ||
oldStyle = oldVnode.data.style || {}, | ||
style = vnode.data.style || {}, | ||
oldHasDel = 'delayed' in oldStyle; | ||
oldStyle = oldVnode.data.style, | ||
style = vnode.data.style; | ||
if (!oldStyle && !style) return; | ||
oldStyle = oldStyle || {}; | ||
style = style || {}; | ||
var oldHasDel = 'delayed' in oldStyle; | ||
for (name in oldStyle) { | ||
@@ -15,0 +20,0 @@ if (!style[name]) { |
{ | ||
"name": "snabbdom", | ||
"version": "0.5.0", | ||
"version": "0.5.1", | ||
"description": "A virtual DOM library with focus on simplicity, modularity, powerful features and performance.", | ||
"main": "snabbdom.js", | ||
"typings": "type-definitions/snabbdom.d.ts", | ||
"directories": { | ||
@@ -15,2 +16,7 @@ "example": "examples", | ||
"fake-raf": "0.0.1", | ||
"gulp": "^3.9.1", | ||
"gulp-clean": "^0.3.2", | ||
"gulp-rename": "^1.2.2", | ||
"gulp-sourcemaps": "^1.6.0", | ||
"gulp-uglify": "^1.5.3", | ||
"knuth-shuffle": "^1.0.1", | ||
@@ -17,0 +23,0 @@ "testem": "^1.0.2", |
293
README.md
@@ -22,18 +22,18 @@ # Snabbdom | ||
Virtual DOM is awesome. It allows us to express our application's view as a | ||
function of its state. But existing solutions were way way too bloated, too | ||
slow, lacked features, had an API biased towards OOP and/or lacked features I | ||
needed. | ||
Virtual DOM is awesome. It allows us to express our application's view | ||
as a function of its state. But existing solutions were way way too | ||
bloated, too slow, lacked features, had an API biased towards OOP | ||
and/or lacked features I needed. | ||
## Introduction | ||
Snabbdom consists of an extremely simple, performant and extensible core that | ||
is only ≈ 200 SLOC. It offers a modular architecture with rich functionality | ||
for extensions through custom modules. To keep the core simple, all non-essential | ||
functionality is delegated to modules. | ||
Snabbdom consists of an extremely simple, performant and extensible | ||
core that is only ≈ 200 SLOC. It offers a modular architecture with | ||
rich functionality for extensions through custom modules. To keep the | ||
core simple, all non-essential functionality is delegated to modules. | ||
You can mold Snabbdom into whatever you desire! Pick, choose and customize the | ||
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 | ||
features listed below. | ||
You can mold Snabbdom into whatever you desire! Pick, choose and | ||
customize the 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 features listed below. | ||
@@ -84,3 +84,3 @@ ## Features | ||
var newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [ | ||
h('span', {style: {fontWeight: 'normal', fontStyle: 'italics'}}, 'This is now italics'), | ||
h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'), | ||
' and this is still just normal text', | ||
@@ -101,9 +101,11 @@ h('a', {props: {href: '/bar'}}, 'I\'ll take you places!') | ||
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. | ||
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. | ||
### `snabbdom.init` | ||
The core exposes only one single function `snabbdom.init`. This `init` takes a list of | ||
modules and returns a `patch` function that uses the specified set of modules. | ||
The core exposes only one single function `snabbdom.init`. This `init` | ||
takes a list of modules and returns a `patch` function that uses the | ||
specified set of modules. | ||
@@ -119,15 +121,16 @@ ```javascript | ||
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 | ||
representing the new, updated view. | ||
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 representing the new, updated view. | ||
If a DOM element with a parent is passed, `newVnode` will be turned into a DOM | ||
node, and the passed element will be replaced by the created DOM node. If an old | ||
vnode is passed, Snabbdom will effeciently modify it to match the description in | ||
the new vnode. | ||
If a DOM element with a parent is passed, `newVnode` will be turned | ||
into a DOM node, and the passed element will be replaced by the | ||
created DOM node. If an old vnode is passed, Snabbdom will effeciently | ||
modify it to match the description in the new vnode. | ||
Any old vnode passed must be the resulting vnode from a previous call to | ||
`patch`. This is necessary since Snabbdom stores information in the vnode. | ||
This makes it possible to implement a simpler and more performant architecture. | ||
This also avoids the creation of a new old vnode tree. | ||
Any old vnode passed must be the resulting vnode from a previous call | ||
to `patch`. This is necessary since Snabbdom stores information in the | ||
vnode. This makes it possible to implement a simpler and more | ||
performant architecture. This also avoids the creation of a new old | ||
vnode tree. | ||
@@ -164,3 +167,3 @@ ```javascript | ||
| `pre` | the patch process begins | none | | ||
| `init` | a vnode has been added | vnode | | ||
| `init` | a vnode has been added | `vnode` | | ||
| `create` | a DOM element has been created based on a vnode | `emptyVnode, vnode` | | ||
@@ -179,9 +182,9 @@ | `insert` | an element has been inserted into the DOM | `vnode` | | ||
The following hooks are available in the `hook` property of individual | ||
elements: `init`, `create`, `insert`, `prepatch`, `update`, `postpatch`, | ||
`destroy`, `remove`. | ||
elements: `init`, `create`, `insert`, `prepatch`, `update`, | ||
`postpatch`, `destroy`, `remove`. | ||
#### Usage | ||
To use hooks, pass them as an object to `hook` field of the data object | ||
argument. | ||
To use hooks, pass them as an object to `hook` field of the data | ||
object argument. | ||
@@ -199,35 +202,36 @@ ```javascript | ||
This hook is invoked during the patch process when a new virtual node has been | ||
found. The hook is called before Snabbdom has processed the node in any way. | ||
I.e., before it has created a DOM node based on the vnode. | ||
This hook is invoked during the patch process when a new virtual node | ||
has been found. The hook is called before Snabbdom has processed the | ||
node in any way. I.e., before it has created a DOM node based on the | ||
vnode. | ||
If the hook handler sets the `vnode` property on the vnode, then Snabbdom will | ||
use the vnode at `vnode` instead of the actual vnode. | ||
#### The `insert` hook | ||
This hook is invoked once the DOM element for a vnode has been inserted into the | ||
document _and_ the rest of the patch cycle is done. This means that you can do | ||
DOM measurements (like using [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) | ||
in this hook safely, knowing that no elements will be changed afterwards that | ||
could affect the position of the inserted elements. | ||
This hook is invoked once the DOM element for a vnode has been | ||
inserted into the document _and_ the rest of the patch cycle is done. | ||
This means that you can do DOM measurements (like using | ||
[getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) | ||
in this hook safely, knowing that no elements will be changed | ||
afterwards that could affect the position of the inserted elements. | ||
#### The `remove` hook | ||
Allows you to hook into the removal of an element. The hook is called once a | ||
vnode is to be removed from the DOM. The handling function receives both the | ||
vnode and a callback. You can control and delay the removal with the callback. | ||
The callback should be invoked once the hook is done doing its business, and the element | ||
will only be removed once all `remove` hooks have invoked their callback. | ||
Allows you to hook into the removal of an element. The hook is called | ||
once a vnode is to be removed from the DOM. The handling function | ||
receives both the vnode and a callback. You can control and delay the | ||
removal with the callback. The callback should be invoked once the | ||
hook is done doing its business, and the element will only be removed | ||
once all `remove` hooks have invoked their callback. | ||
The hook is only triggered when an element is to be removed from its parent – | ||
not if it is the child of an element that is removed. For that, see the `destroy` | ||
hook. | ||
The hook is only triggered when an element is to be removed from its | ||
parent – not if it is the child of an element that is removed. For | ||
that, see the `destroy` hook. | ||
#### The `destroy` hook | ||
This hook is invoked on a virtual node when its DOM element is removed from the DOM or if its parent is being removed from the DOM. | ||
This hook is invoked on a virtual node when its DOM element is removed | ||
from the DOM or if its parent is being removed from the DOM. | ||
To see the difference between this hook and the `remove` hook, consider an | ||
example. | ||
To see the difference between this hook and the `remove` hook, | ||
consider an example. | ||
@@ -241,9 +245,10 @@ ```js | ||
Here `destroy` is triggered for both the inner `div` element _and_ the `span` | ||
element it contains. `remove`, on the other hand, is only triggered on the `div` | ||
element because it is the only element being detached from its parent. | ||
Here `destroy` is triggered for both the inner `div` element _and_ the | ||
`span` element it contains. `remove`, on the other hand, is only | ||
triggered on the `div` element because it is the only element being | ||
detached from its parent. | ||
You can, for instance, use `remove` to trigger an animation when an element is | ||
being removed and use the `destroy` hook to additionally animate the | ||
disappearance of the removed element's children. | ||
You can, for instance, use `remove` to trigger an animation when an | ||
element is being removed and use the `destroy` hook to additionally | ||
animate the disappearance of the removed element's children. | ||
@@ -265,5 +270,5 @@ ### Creating modules | ||
With this mechanism you can easily augument the behaviour of | ||
Snabbdom. For demonstration, take a look at the implementations of the | ||
default modules. | ||
With this mechanism you can easily augument the behaviour of Snabbdom. | ||
For demonstration, take a look at the implementations of the default | ||
modules. | ||
@@ -277,5 +282,5 @@ ## Modules documentation | ||
The class module provides an easy way to dynamically toggle classes on | ||
elements. It expects an object in the `class` data property. The object should | ||
map class names to booleans that indicates whether or not the class should stay | ||
or go on the vnode. | ||
elements. It expects an object in the `class` data property. The | ||
object should map class names to booleans that indicates whether or | ||
not the class should stay or go on the vnode. | ||
@@ -302,13 +307,16 @@ ```javascript | ||
Attributes are added and updated using `setAttribute`. In case of an attribute | ||
that had been previously added/set and is no longer present in the `attrs` object, | ||
it is removed from the DOM element's attribute list using `removeAttribute`. | ||
Attributes are added and updated using `setAttribute`. In case of an | ||
attribute that had been previously added/set and is no longer present | ||
in the `attrs` object, it is removed from the DOM element's attribute | ||
list using `removeAttribute`. | ||
In the case of boolean attributes (e.g. `disabled`, `hidden`, `selected` ...), | ||
the meaning doesn't depend on the attribute value (`true` or `false`) but depends | ||
instead on the presence/absence of the attribute itself in the DOM element. Those | ||
attributes are handled differently by the module: if a boolean attribute is set | ||
to a [falsy value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) (`0`, `-0`, `null`, `false`,`NaN`, `undefined`, or the empty | ||
string (`""`)), then the attribute will be removed from the attribute list of the | ||
DOM element. | ||
In the case of boolean attributes (e.g. `disabled`, `hidden`, | ||
`selected` ...), the meaning doesn't depend on the attribute value | ||
(`true` or `false`) but depends instead on the presence/absence of the | ||
attribute itself in the DOM element. Those attributes are handled | ||
differently by the module: if a boolean attribute is set to a | ||
[falsy value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | ||
(`0`, `-0`, `null`, `false`,`NaN`, `undefined`, or the empty string | ||
(`""`)), then the attribute will be removed from the attribute list of | ||
the DOM element. | ||
@@ -326,5 +334,5 @@ ### The style module | ||
Note that the style module does not remove style attributes if they are removed | ||
as properties from the style object. To remove a style, you should instead set | ||
it to the empty string. | ||
Note that the style module does not remove style attributes if they | ||
are removed as properties from the style object. To remove a style, | ||
you should instead set it to the empty string. | ||
@@ -339,4 +347,4 @@ ```javascript | ||
You can specify properties as being delayed. Whenever these properties change, | ||
the change is not applied until after the next frame. | ||
You can specify properties as being delayed. Whenever these properties | ||
change, the change is not applied until after the next frame. | ||
@@ -353,6 +361,6 @@ ```javascript | ||
Styles set in the `remove` property will take effect once the element is about | ||
to be removed from the DOM. The applied styles should be animated with CSS | ||
transitions. Only once all the styles are done animating will the element be | ||
removed from the DOM. | ||
Styles set in the `remove` property will take effect once the element | ||
is about to be removed from the DOM. The applied styles should be | ||
animated with CSS transitions. Only once all the styles are done | ||
animating will the element be removed from the DOM. | ||
@@ -382,6 +390,6 @@ ```javascript | ||
You can attach a function to an event on a vnode by supplying an object at `on` | ||
with a property corresponding to the name of the event you want to listen to. | ||
The function will be called when the event happens and will be passed the event | ||
object that belongs to it. | ||
You can attach a function to an event on a vnode by supplying an | ||
object at `on` with a property corresponding to the name of the event | ||
you want to listen to. The function will be called when the event | ||
happens and will be passed the event object that belongs to it. | ||
@@ -393,13 +401,14 @@ ```javascript | ||
Very often, however, you're not really interested in the event object itself. | ||
Often you have some data associated with the element that triggers an event | ||
and you want that data passed along instead. | ||
Very often, however, you're not really interested in the event object | ||
itself. Often you have some data associated with the element that | ||
triggers an event and you want that data passed along instead. | ||
Consider a counter application with three buttons, one to increment the counter | ||
by 1, one to increment the counter by 2 and one to increment the counter by 3. | ||
You don't really care exactly which button was pressed. Instead you're | ||
interested in what number was associated with the clicked button. The event listeners | ||
module allows one to express that by supplying an array at the named event property. | ||
The first element in the array should be a function that will be invoked with | ||
the value in the second element once the event occurs. | ||
Consider a counter application with three buttons, one to increment | ||
the counter by 1, one to increment the counter by 2 and one to | ||
increment the counter by 3. You don't really care exactly which button | ||
was pressed. Instead you're interested in what number was associated | ||
with the clicked button. The event listeners module allows one to | ||
express that by supplying an array at the named event property. The | ||
first element in the array should be a function that will be invoked | ||
with the value in the second element once the event occurs. | ||
@@ -418,6 +427,7 @@ ```javascript | ||
Note, however, that **you should be careful when sharing event handlers between | ||
vnodes**, because of the technique this module uses to avoid re-binding | ||
event handlers to the DOM. (And in general, sharing data between vnodes is | ||
not guaranteed to work, because modules are allowed to mutate the given data). | ||
Note, however, that **you should be careful when sharing event | ||
handlers between vnodes**, because of the technique this module uses | ||
to avoid re-binding event handlers to the DOM. (And in general, | ||
sharing data between vnodes is not guaranteed to work, because modules | ||
are allowed to mutate the given data). | ||
@@ -488,4 +498,4 @@ In particular, you should **not** do something like this: | ||
Thunks are an optimization strategy that can be used when one is dealing with | ||
immutable data. | ||
Thunks are an optimization strategy that can be used when one is | ||
dealing with immutable data. | ||
@@ -500,5 +510,6 @@ Consider a simple function for creating a virtual node based on a number. | ||
The view depends only on `n`. This means that if `n` is unchanged, then | ||
creating the virtual DOM node and patching it against the old vnode is | ||
wasteful. To avoid the overhead we can use the `thunk` helper function. | ||
The view depends only on `n`. This means that if `n` is unchanged, | ||
then creating the virtual DOM node and patching it against the old | ||
vnode is wasteful. To avoid the overhead we can use the `thunk` helper | ||
function. | ||
@@ -511,11 +522,11 @@ ```js | ||
Instead of actually invoking the `numberView` function this will only place | ||
a dummy vnode in the virtual tree. When Snabbdom patches this dummy vnode | ||
against a previous vnode, it will compare the value of `n`. If `n` is unchanged | ||
it will simply reuse the old vnode. This avoids recreating the number view and | ||
the diff process altogether. | ||
Instead of actually invoking the `numberView` function this will only | ||
place a dummy vnode in the virtual tree. When Snabbdom patches this | ||
dummy vnode against a previous vnode, it will compare the value of | ||
`n`. If `n` is unchanged it will simply reuse the old vnode. This | ||
avoids recreating the number view and the diff process altogether. | ||
The view function here is only an example. In practice thunks are only | ||
relevant if you are rendering a complicated view that takes significant | ||
computational time to generate. | ||
relevant if you are rendering a complicated view that takes | ||
significant computational time to generate. | ||
@@ -532,8 +543,15 @@ ## Virtual Node | ||
#### sel : String | ||
The `.sel` property of a virtual node is the CSS selector passed to [`h()`](#snabbdomh) during creation. | ||
For example: `h('div#container', {}, [...])` will create a a virtual node which has `div#container` as its `.sel` property. | ||
The `.sel` property of a virtual node is the CSS selector passed to | ||
[`h()`](#snabbdomh) during creation. For example: `h('div#container', | ||
{}, [...])` will create a a virtual node which has `div#container` as | ||
its `.sel` property. | ||
#### data : Object | ||
The `.data` property of a virtual node is the place to add information for [modules](#modules-documentation) to access and manipulate the real DOM element when it is created; Add styles, CSS classes, attributes, etc. | ||
The `.data` property of a virtual node is the place to add information | ||
for [modules](#modules-documentation) to access and manipulate the | ||
real DOM element when it is created; Add styles, CSS classes, | ||
attributes, etc. | ||
The data object is the (optional) second parameter to [`h()`](#snabbdomh) | ||
@@ -552,6 +570,11 @@ | ||
#### children : Array<vnode> | ||
The `.children` property of a virtual node is the third (optional) parameter to [`h()`](#snabbdomh) during creation. | ||
`.children` is simply an Array of virtual nodes that should be added as children of the parent DOM node upon creation. | ||
For example `h('div', {}, [ h('h1', {}, 'Hello, World') ])` will create a virtual node with | ||
The `.children` property of a virtual node is the third (optional) | ||
parameter to [`h()`](#snabbdomh) during creation. `.children` is | ||
simply an Array of virtual nodes that should be added as children of | ||
the parent DOM node upon creation. | ||
For example `h('div', {}, [ h('h1', {}, 'Hello, World') ])` will | ||
create a virtual node with | ||
```js | ||
@@ -569,18 +592,34 @@ [ | ||
``` | ||
as its `.children` property. | ||
#### text : string | ||
The `.text` property is created when a virtual node is created with only a single child that possesses text and only requires `document.createTextNode()` to be used. | ||
For example: `h('h1', {}, 'Hello')` will create a virtual node with `Hello` as its `.text` property. | ||
The `.text` property is created when a virtual node is created with | ||
only a single child that possesses text and only requires | ||
`document.createTextNode()` to be used. | ||
For example: `h('h1', {}, 'Hello')` will create a virtual node with | ||
`Hello` as its `.text` property. | ||
#### elm : Element | ||
The `.elm` property of a virtual node is a pointer to the real DOM node created by snabbdom. This property is very useful to do calculations in [hooks](#hooks) as well as [modules](#modules-documentation). | ||
The `.elm` property of a virtual node is a pointer to the real DOM | ||
node created by snabbdom. This property is very useful to do | ||
calculations in [hooks](#hooks) as well as | ||
[modules](#modules-documentation). | ||
#### key : string | number | ||
The `.key` property is created when a key is provided inside of your [`.data`](#data--object) object. The `.key` property is used to keep pointers to DOM nodes that existed previously to avoid recreating them if it is unnecessary. This is very useful for things like list reordering. A key must be either a string or a number to allow for proper lookup as it is stored internally as a key/value pair inside of an object, where `.key` is the key and the value is the [`.elm`](#elm--element) property created. | ||
The `.key` property is created when a key is provided inside of your | ||
[`.data`](#data--object) object. The `.key` property is used to keep | ||
pointers to DOM nodes that existed previously to avoid recreating them | ||
if it is unnecessary. This is very useful for things like list | ||
reordering. A key must be either a string or a number to allow for | ||
proper lookup as it is stored internally as a key/value pair inside of | ||
an object, where `.key` is the key and the value is the | ||
[`.elm`](#elm--element) property created. | ||
For example: `h('div', {key: 1}, [])` will create a virtual node object with a `.key` property with the value of `1`. | ||
For example: `h('div', {key: 1}, [])` will create a virtual node | ||
object with a `.key` property with the value of `1`. | ||
@@ -587,0 +626,0 @@ |
@@ -73,3 +73,3 @@ // jshint newcap: false | ||
if (hash < dot) elm.id = sel.slice(hash + 1, dot); | ||
if (dotIdx > 0) elm.className = sel.slice(dot+1).replace(/\./g, ' '); | ||
if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' '); | ||
if (is.array(children)) { | ||
@@ -76,0 +76,0 @@ for (i = 0; i < children.length; ++i) { |
@@ -76,4 +76,17 @@ var assert = require('assert'); | ||
it('has correct namespace', function() { | ||
elm = patch(vnode0, h('div', [h('div', {ns: 'http://www.w3.org/2000/svg'})])).elm; | ||
assert.equal(elm.firstChild.namespaceURI, 'http://www.w3.org/2000/svg'); | ||
var SVGNamespace = 'http://www.w3.org/2000/svg'; | ||
var XHTMLNamespace = 'http://www.w3.org/1999/xhtml'; | ||
elm = patch(vnode0, h('div', [h('div', {ns: SVGNamespace})])).elm; | ||
assert.equal(elm.firstChild.namespaceURI, SVGNamespace); | ||
elm = patch(vnode0, h('svg', [ | ||
h('foreignObject', [ | ||
h('div', ['I am HTML embedded in SVG']) | ||
]) | ||
])).elm; | ||
assert.equal(elm.namespaceURI, SVGNamespace); | ||
assert.equal(elm.firstChild.namespaceURI, SVGNamespace); | ||
assert.equal(elm.firstChild.firstChild.namespaceURI, XHTMLNamespace); | ||
}); | ||
@@ -80,0 +93,0 @@ it('is recieves classes in selector', function() { |
@@ -14,3 +14,3 @@ var h = require('./h'); | ||
function init(thunk) { | ||
var i, cur = thunk.data; | ||
var cur = thunk.data; | ||
var vnode = cur.fn.apply(undefined, cur.args); | ||
@@ -17,0 +17,0 @@ copyToThunk(vnode, thunk); |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
510845
67
9410
620
11
8
41