`; //=>

// the *deprecated* dataset special case html`

`; //=>

// the *new* dataset special case html`

`; //=>

``` This means the previous `data=${...}` behavior should be substituted with `.dataset=${...}` and it's now possible to better reflect declarative intents in nodes, simplifying both `data-*` attributes and `aria-*` ones. Please note using `data-name=${value}`, as well as `aria-name=${value}` is still handled like any other regular attribute, hence it will work as expected, actually faster when the values don't change frequently, as both `aria` and `data` special cases simply loop through the object keys and assign their values to node's attributes. ### V2.1 Introducing A New Listener Feature Until version 2.1, there was no way to define different options for any listener. The `el.addEventListener(type, listener, false)` was the only kind of operation possible behind the scene. In _v2.1_ though, whenever a second option is needed, it is now possible to pass an `Array` instead, in the form `[listener, {once: true}]`, as example, or `[listener, true]` to use capture instead of bubbling, and so on and so forth. Bear in mind, specially for the `once` case, if the listener is different per each update, like `onclick=${[() => stuff(), {once: true}]}`, it will be set each time that update happens, so that in this case is better to use always the same listener, either via outer scope callback, or via reference, using `useRef` and the `handleEvent` pattern, as example. If you never needed to add a different second option, there is nothing you should do, everything will work exactly as it did before. ### V2 Breaking Changes & Improvements #### Breaking * dropped the ambiguous ability to produce nodes when no `render(...)` is invoked. When needed, which is the minority of the cases, you need to explicitly use `html.node` or `svg.node`, instead of just `html` or `svg`. For every other cases, use `render(where, what)`. * the `render(where, what)` does not need a callback anymore. You can now ``render(node, html`

content

`)`` right away. If a callback is provided, that will still be invoked. * removed `useHook` as it's unnecessary since you can use `useRef` through `html.for(...)` or `svg.for(...)` within any `useRef` provided by your library of choice (i.e. [dom-augmentor](https://github.com/WebReflection/dom-augmentor#readme)) * the recently introduced `inner.html/svg` has been removed, as completely unnatural and error prone (just use `html` anywhere, it'll work). ### Improvements * a fundamental core-logic implementation that was trashing any node after one or more collections has been refactored and fixed. The current logic create a stack per each array found down the rendering road, isolating those DOM updates per stack. This means that performance have been improved, and GC operations reduced. * `html` and `svg` template literals tags, now offer both `.for(ref[, id])` and `.node`, to either retain the same content (keyed render) or create fresh new nodes out of the box as one-off operation (via `.node`). * slightly reduced code size, which is always nice to have, after a refactoring ### V1 Changes + New Feature Removed `transform` export and made default [domtagger](https://github.com/WebReflection/domtagger) customizable via `custom` export. ```js import { custom } from 'lighterhtml'; const { html, render } = custom({ // the domtagger attributes handler attribute: callback => (node, name, original) => { // return a function that will handle the attribute value // the function will receive just the new value if (name === 'double') return value => { node[name] = value + value; }; // the received callback is usable as return fallback return callback(node, name, original); }, // the domtagger any-content handler any: callback => (node, childNodes) => { // return a function that will handle handle all special cases // the function will receive just the new *hole* value if (node.nodeName === 'CUSTOM') { return value => { node.appendChild(value); }; } // the received callback is usable as return fallback return callback(node, childNodes); }, // the domtagger text for text only cases text: callback => (node) => { // return a function that will handle handle text content cases // the function will receive just the new text value if (node.nodeName === 'WRAP') { return value => { node.textContent = `(${value})`; }; } // the received callback is usable as return fallback return callback(node); }, // optionally you can use the special transform handler too // in this case, and in V1, the callback is just the String one transform: callback => markup => callback(markup), // same goes for convert, with the callback being the one // originally used to "convert" the template from Array to HTML // see: https://github.com/WebReflection/domtagger/issues/17#issuecomment-526151473 convert: callback => template => callback(template) }); ```