From b4a6751b496223444c3afd167f9c333bed420470 Mon Sep 17 00:00:00 2001 From: DM Date: Tue, 18 Jan 2022 11:24:49 +0800 Subject: [PATCH] feat: toVnode is support dataset ISSUES CLOSED: #976 --- src/tovnode.ts | 12 ++++++++++-- test/unit/core.ts | 26 +++++++++++++++++++++++++- 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/tovnode.ts b/src/tovnode.ts index f461192..8bc2e1e 100644 --- a/src/tovnode.ts +++ b/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 = {}; + const data: Record = {}; + 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" && diff --git a/test/unit/core.ts b/test/unit/core.ts index a560cef..cd7b5db 100644 --- a/test/unit/core.ts +++ b/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) {