snabbdom / snabbdom

A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vNode created via toVNode looses dataset since 3.4.0 release

dperrymorrow opened this issue · comments

Forgive me if im wrong, but it seems like since 3.4.0 release and #976 was merged. creating a vNode via toVNode and then patching with that node, dataset is lost.

https://stackblitz.com/edit/js-znkhkf?file=index.js

example:

import { datasetModule, init, toVNode } from 'snabbdom';

const patch = init([datasetModule]);
const $container = document.getElementById('app');

const $tmp = document.createElement('div');
$tmp.innerHTML = `<h1 data-something="yes">hello</h1>`;
const newNode = toVNode($tmp);

patch($container, newNode);

If i roll back to 3.3.1 its works as expected. Perhaps toVNode just missed an update with the above mentioned change?

This is still an issue since @nexteditorjs only partially fixed. It only correct works if data attributes has not having dash in names (which is valid data name see https://reference.codeproject.com/dom/HTMLElement/dataset).

// See https://www.npmjs.com/package/snabbdom documentation.
import * as snabbdom from 'https://esm.run/snabbdom';

const patch = snabbdom.init([snabbdom.datasetModule]);
const $container = document.getElementById('app');

const $tmp = document.createElement('div');
/* $tmp.innerHTML = `<h1 data-something="yes">hello</h1>`; */
$tmp.innerHTML = `<h1 data-some-thing="yes">hello</h1>`;
const newNode = snabbdom.toVNode($tmp);

patch($container, newNode);

This will although a valid html string, throw an error. (can be checked https://jsfiddle.net/u251gbn8/)

This was already reported on #1031 but for some reason this issue was closed.

If you using DOMStringMap to set dataset elements but you should also replace - following with a letter with letter which is transformed into its uppercase counterpart;

Best regards,
Nikola

Thanks for reporting this @HT2313. There is a proposed fix in #1109.