29:null 2a:["$","title",null,{"children":"Reactive Templates: Description | Mikhail Kotelnikov | Observable"}] 2f:T64c, Methods: * `newDomTemplate(template)` - returns a new template library dynamically injecting values in DOM returned by async iterators - `template` - a string-template function returning DOM (ex: Observable `htl.html`, `htl.svg`, `md` etc) * `values(input, transform)` - transforms values returned by the given input to an iterator - `input` - an input element - it should have the `value` property and fire `input` events when the value changed; see [Observable Inputs](https://observablehq.com/@observablehq/inputs) for example - `transform` - an optional function transforming/formatting values returned by the input * `listen(element, eventKey, transform)` - returns the events generated by the given element as an iterator - `element`- an element generating events or a function, returning the element - `eventKey`- name of the event - `tranform` - an optional function mapping events to returned values (ex: to format these values) Example: ```js // Step 1: Import newDomTemplate function from the notebook: import { newDomTemplate } from "@kotelnikov/reactive-templates" // Step 2: Bind the htl.html template library with iterator handlers: rhtml = newDomTemplate(htl.html); // Step 3: Create an iterator or async iterator providing values. // This implementation generates a new value once per second: async function* timer(timeout = 1000) { for (let counter = 0; true; counter++) { yield counter; await new Promise(r => setTimeout(r, timeout)); } } // Step 4: Use generated values in the templates: rhtml`

Counter: \${timer()}

` ``` 30:T4ed,{ const currentTime = timer(1000, formatCurrentTime); const slider = Inputs.range([0, 10], { step: 1 }); const formatSatisfaction = (v) => { return v < 3 ? ":-(" : v < 5 ? ":-|" : v < 7 ? ":-)" : ":-*"; // return [v < 3 ? ":-(" : v < 5 ? ":-|" : v < 7 ? ":-)" : ":-*", " ", v]; }; const comment = Inputs.textarea({ rows: 10, minlength: 40, value: `**Useful Resources:** - [ObservableHQ](https://www.observablehq.com) - [d3](https://d3js.org/) - [d3 Examples Gallery](https://observablehq.com/@d3/gallery) ` }); return rmd` This markdown cell shows how static markdown can be combined with dynamic values without cells reloading. Current GMT Time: ${currentTime} | Your satisfaction level is **${values( slider, formatSatisfaction )}** (${values(slider)} from 10) |------------- | ${slider} | ${values(slider, formatSatisfaction)} |Please leave a comment: | Raw content of your comment: |------------------------|------------- | ${comment} |

${values(
    comment
  )}

|Your Formatted Comment Preview: |------------------------------------- | ${values(comment, (v) => md([v]))} *Thank you for watching!* --- `; }31:[] 2d:{"id":"fddae65bbfe2ce06","slug":"reactive-templates-description","title":"Reactive Templates: Description","thumbnail":"e9e98ad6cad9774bc96c16156c0fff56168bba1847c812ad952ae238db66a426","access_level":"public","create_time":"$D2022-10-10T15:02:51.333Z","update_time":"$D2022-10-26T11:06:18.919Z","view_time":null,"first_public_time":"$D2022-10-11T10:05:20.498Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"d4c65cdf77f8f4fd","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":"starter_2024"},"version":505,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null}],"members":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Reactive Templates: Description","cells":[{"id":387,"value":"# Reactive Templates: Description\n## Use Iterators in String Templates\n\nSee here [Reactive Templates](https://observablehq.com/@kotelnikov/reactive-templates) for methods implementations.\n\nUsage:\n```js\nimport { newDomTemplate, values, listen } from \"@kotelnikov/reactive-templates\"\n```\n\nThe `newDomTemplate` method allows to inject dynamic values provided by iterators or async iterators in DOM created with templates libraries like [Observable htl](https://observablehq.com/@observablehq/htl) or [Observable Markdown](https://observablehq.com/@observablehq/stdlib#mdSection).\n\n\n*Note: This notebook was inspired by the [Reactive Hypertext Literal](https://observablehq.com/@yurivish/reactive-htl) implementation written by Yuri Vishnevsky.*\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"toc()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"## Reactive Templates Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"import { newDomTemplate, values, listen } from \"@kotelnikov/reactive-templates\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"## Reactive `htl.html` Templates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"rhtml = newDomTemplate(htl.html)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"An async iterator function providing values for templates:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"async function* timer(timeout = 1000, transform = (v) => v) {\n try {\n for (let counter = 0; true; counter++) {\n yield transform(counter);\n await new Promise((r) => setTimeout(r, timeout));\n }\n } finally {\n console.log(\"TIMER STOPPED\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"This example shows how iterator values are injected in DOM:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"// Use generated values in templates:\nrhtml`

Counter: ${[\n timer(10 * 1000),\n \" : \",\n timer(1 * 1000)\n]}!

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"Example of dynamic transformation of returned values before their inserting in DOM:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"rhtml`

GMT Time: ${timer(\n 1000,\n (value) => formatCurrentTime() + \" (\" + value + \")\"\n)}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"function formatCurrentTime() {\n return new Date().toISOString().replace(/^.*T(\\d\\d:\\d\\d:\\d\\d).*$/, \"$1\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"## Using `values` Function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"In the example below values returned by input elements are injected in DOM without Observable cells reloading:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"{\n const age = Inputs.range([0, 100], { label: \"Age: \", step: 1, value: 42 });\n const formatAge = (v) =>\n v < 10\n ? \"a baby\"\n : v < 20\n ? \"a teen\"\n : v < 30\n ? \"young\"\n : v < 60\n ? \"in your best age\"\n : \"a youngster again\";\n const name = Inputs.text({ label: \"Name: \", value: \"John Smith\" });\n return rhtml`

${values(name, (value) => value || \"Anonymous\")}

Age: ${values(age)}yo. You are ${values(age, formatAge)}!

\n ${name}\n ${age}\n

Thank you for watching!

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"## Using the `listen` Function\n\nThe `listen` function transforms DOM events to an iterator. In this example the block below shows the mouse position over the DIV element. Note that in this case the `listen` method uses a function (`() => div`) to return the element to listen. This approach allows to listen the `div`element which is not initialized yet when the `listen`function is called.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"{\n const div = rhtml`

Mouse Position ${listen(\n () => div,\n \"pointermove\",\n (elm, ev) => {\n const [offsetX, offsetY] = ev ? [ev.offsetX, ev.offsetY] : [0, 0];\n return htl.html`${Math.round(offsetX)} : ${Math.round(offsetY)}`;\n }\n )}!

`;\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"## Markdown With Reactive Blocks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"rmd = newDomTemplate(md)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"## Use Preact Signals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"This section shows how template binding can be used to work with [Preact Signals](https://preactjs.com/guide/v10/signals/).\n\nThe function below transforms Preact Signals to iterators:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"function* fromSignal(s, transform = (v) => v) {\n yield* Generators.observe((notify) =>\n SignalsCore.effect(() => notify(transform(s.value)))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"Let's create a new counter signal...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"counter = SignalsCore.signal(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"...and start periodic update of this signal:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"{\n let stop = false;\n invalidation.then(() => (stop = true));\n while (!stop) {\n counter.value++;\n await Promises.delay(1000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"The cell below will be updated each time when the signal recieve a new value:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"fromSignal(counter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"Now we can use the `fromSignal` method in a reactive HTML template:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"rhtml`

Signal value: ${fromSignal(counter)}
Timestamp: ${fromSignal(counter, () =>\n Date.now()\n)} (transformed signal value)

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"The same signal can be used to update markdown templates:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"rmd`\n* Signal Value: *${fromSignal(counter)}*\n* Timestamp: *${fromSignal(counter, () =>\n Date.now()\n)}* (transformed signal value)\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"## External Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":398,"value":"SignalsCore = import(\"@preact/signals-core\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"