Skip to content

Commit

Permalink
New: interpolations as functions within elements content
Browse files Browse the repository at this point in the history
This aligns uhtml with lighterhtml and hyperHTML, so that whenever an interpolation is a callback, it'll be invoked right away, passing along the node.

This new feature enables plugins and extensions to what uhtml offers already, beside making it identical, in behavior, to lighterhtml.
  • Loading branch information
WebReflection committed Feb 17, 2021
1 parent 65de14e commit fd7f365
Show file tree
Hide file tree
Showing 8 changed files with 21 additions and 6 deletions.
3 changes: 2 additions & 1 deletion DOCUMENTATION.md
Expand Up @@ -432,14 +432,15 @@ render(document.body, html`

Beside nodes where the content will be inevitably just text, like it is for `style` or `textarea`, as example, every other interpolation can contain primitives, as strings, numbers, or even booleans, or the returned value of `html` or `svg`, plus regular DOM nodes.

The only special case are _Array_ of either primitives, or returned values from `html` or `svg`.
The only special case are _Array_ of either primitives, or returned values from `html` or `svg`, and since *2.5* _Function_, invoked and resolved after invoke.


```js
render(document.body, html`
<ul>
<li>This is ${'primitive'}</li>
<li>This is joined as primitives: ${[1, 2, 3]}</li>
<li>This is a callback: ${utility}</li>
${lines.map((text, i) => html`
<li>Row ${i} with content: ${text}</li>
`)}
Expand Down
4 changes: 4 additions & 0 deletions README.md
Expand Up @@ -14,6 +14,10 @@ Please ask questions in the [dedicated discussions repository](https://github.co

---

### V2.5 Update

* an interpolated value, within a *DOM* element, can now be a `function`, enabling a world of *µhtml* extending possibilities, also aligning the behavior with both *lighterhtml* and *hyperHTML*. That is: `<el>${callback}</el>`! The `callback` will be invoked with the *comment* pin/placeholder as unique argument, where its `parentNode` would be the element containing such comment, if needed, and its returned value will be passed along the same mechanism that resolves already all other cases.

### V2.4 Update

* a new `?attribute=${value}` prefix, with a question mark, has landed, after [this long debate](https://github.com/WebReflection/discussions/discussions/13), and based to the fact *µhtml* never wants to be ambiguous. However, the mighty [lit-html](https://terodox.tech/lit-html-part-2/) put an end to the debate, disambiguating through a `?` question mark prefix, which explicits developers intents, and works well across browsers. So that's it: whenever you expect an attribute to be in, or out, use `?name=${value}` and win the day 🥳
Expand Down
2 changes: 1 addition & 1 deletion async.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions cjs/handlers.js
Expand Up @@ -51,6 +51,9 @@ const handleAnything = comment => {
nodes = diff(comment, nodes, [text]);
}
break;
case 'function':
anyContent(newValue(node));
break;
// null, and undefined are used to cleanup previous content
case 'object':
case 'undefined':
Expand Down

0 comments on commit fd7f365

Please sign in to comment.