Merge branch 'master' into type

README.md

@@ -312,6 +312,14 @@ differently by the module: if a boolean attribute is set to a
 (`""`)), then the attribute will be removed from the attribute list of
 the DOM element.
 
+### The dataset module
+
+Allows you to set custom data attributes (`data-*`) on DOM elements. These can then be accessed with the [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) property.
+
+```javascript
+h('button', {dataset: {action: 'reset'}}, 'Reset');
+```
+
 ### The style module
 
 The style module is for making your HTML look slick and animate smoothly. At
@@ -656,6 +664,8 @@ Here are some approaches to building applications with Snabbdom.
 * [Cyclow](http://cyclow.js.org) -
   "A reactive frontend framework for JavaScript"
   uses Snabbdom
+* [Tung](https://github.com/Reon90/tung) –
+  A javascript library for rendering html. Tung helps to divide html and javascript development.
 
 Be sure to share it if you're building an application in another way
 using Snabbdom.

src/snabbdom.ts

@@ -98,8 +98,8 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
       const tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;
       const elm = vnode.elm = isDef(data) && isDef(i = (data as VNodeData).ns) ? api.createElementNS(i, tag)
                                                                                : api.createElement(tag);
-      if (hash < dot) elm.id = sel.slice(hash + 1, dot);
+      if (hash < dot) elm.setAttribute('id', sel.slice(hash + 1, dot));
-      if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' ');
+      if (dotIdx > 0) elm.setAttribute('class', sel.slice(dot + 1).replace(/\./g, ' '));
       for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
       if (is.array(children)) {
         for (i = 0; i < children.length; ++i) {

test/core.js

@@ -113,19 +113,40 @@ describe('snabbdom', function() {
       elm = patch(vnode0, h('svg-custom-el')).elm;
       assert.notEqual(elm.namespaceURI, SVGNamespace);
     });
-    it('is receives classes in selector', function() {
+    it('receives classes in selector', function() {
       elm = patch(vnode0, h('div', [h('i.am.a.class')])).elm;
       assert(elm.firstChild.classList.contains('am'));
       assert(elm.firstChild.classList.contains('a'));
       assert(elm.firstChild.classList.contains('class'));
     });
-    it('is receives classes in class property', function() {
+    it('receives classes in class property', function() {
       elm = patch(vnode0, h('i', {class: {am: true, a: true, class: true, not: false}})).elm;
       assert(elm.classList.contains('am'));
       assert(elm.classList.contains('a'));
       assert(elm.classList.contains('class'));
       assert(!elm.classList.contains('not'));
     });
+    it('receives classes in selector when namespaced', function() {
+      elm = patch(vnode0,
+        h('svg', [
+          h('g.am.a.class.too')
+        ])
+      ).elm;
+      assert(elm.firstChild.classList.contains('am'));
+      assert(elm.firstChild.classList.contains('a'));
+      assert(elm.firstChild.classList.contains('class'));
+    });
+    it('receives classes in class property when namespaced', function() {
+      elm = patch(vnode0,
+        h('svg', [
+          h('g', {class: {am: true, a: true, class: true, not: false, too: true}})
+        ])
+      ).elm;
+      assert(elm.firstChild.classList.contains('am'));
+      assert(elm.firstChild.classList.contains('a'));
+      assert(elm.firstChild.classList.contains('class'));
+      assert(!elm.firstChild.classList.contains('not'));
+    });
     it('handles classes from both selector and property', function() {
       elm = patch(vnode0, h('div', [h('i.has', {class: {classes: true}})])).elm;
       assert(elm.firstChild.classList.contains('has'));