feat: toVnode is support dataset

ISSUES CLOSED: #976

src/tovnode.ts

@@ -11,6 +11,9 @@ export function toVNode(node: Node, domApi?: DOMAPI): VNode {
     const c = cn ? "." + cn.split(" ").join(".") : "";
     const sel = api.tagName(node).toLowerCase() + id + c;
     const attrs: any = {};
+    const datasets: Record<string, string> = {};
+    const data: Record<string, any> = {};
+
     const children: VNode[] = [];
     let name: string;
     let i: number, n: number;
@@ -18,14 +21,19 @@ export function toVNode(node: Node, domApi?: DOMAPI): VNode {
     const elmChildren = node.childNodes;
     for (i = 0, n = elmAttrs.length; i < n; i++) {
       name = elmAttrs[i].nodeName;
-      if (name !== "id" && name !== "class") {
+      if (name.startsWith("data-")) {
+        datasets[name.slice(5)] = elmAttrs[i].nodeValue || "";
+      } else if (name !== "id" && name !== "class") {
         attrs[name] = elmAttrs[i].nodeValue;
       }
     }
     for (i = 0, n = elmChildren.length; i < n; i++) {
       children.push(toVNode(elmChildren[i], domApi));
     }
-    const data = { attrs };
+
+    if (Object.keys(attrs).length > 0) data.attrs = attrs;
+    if (Object.keys(datasets).length > 0) data.datasets = datasets;
+
     if (
       sel[0] === "s" &&
       sel[1] === "v" &&

test/unit/core.ts

@@ -549,9 +549,33 @@ describe("snabbdom", function () {
         assert.deepEqual(vnode.data, { attrs: { data: "value" } });
         const children = vnode.children as [VNode, VNode];
         assert.strictEqual(children[0].sel, "x-h2#hx");
-        assert.deepEqual(children[0].data, { attrs: { "data-env": "xyz" } });
+        assert.deepEqual(children[0].data, { datasets: { env: "xyz" } });
         assert.strictEqual(children[1].text, "Foobar");
       });
+
+      it("can parsing datasets and attrs", function () {
+        const onlyAttrs = document.createElement("div");
+        onlyAttrs.setAttribute("foo", "bar");
+        assert.deepEqual(toVNode(onlyAttrs).data, { attrs: { foo: "bar" } });
+        const onlyDatasets = document.createElement("div");
+        onlyDatasets.setAttribute("data-foo", "bar");
+        assert.deepEqual(toVNode(onlyDatasets).data, {
+          datasets: { foo: "bar" },
+        });
+        const onlyDatasets2 = document.createElement("div");
+        onlyDatasets2.dataset.foo = "bar";
+        assert.deepEqual(toVNode(onlyDatasets2).data, {
+          datasets: { foo: "bar" },
+        });
+        const bothAttrsAndDatasets = document.createElement("div");
+        bothAttrsAndDatasets.setAttribute("foo", "bar");
+        bothAttrsAndDatasets.setAttribute("data-foo", "bar");
+        bothAttrsAndDatasets.dataset.again = "again";
+        assert.deepEqual(toVNode(bothAttrsAndDatasets).data, {
+          attrs: { foo: "bar" },
+          datasets: { foo: "bar", again: "again" },
+        });
+      });
     });
     describe("updating children with keys", function () {
       function spanNum(n?: null | Key) {