29:null 2a:["$","title",null,{"children":"Reactive Hypertext Literal | Roman Samec | Observable"}] 2f:T424,Fine-grained reactivity is a lot of fun! If you'd like to learn more about it, [Ryan Carniato](https://twitter.com/RyanCarniato), the creator of [SolidJS](https://www.solidjs.com/), has written a number of excellent articles including [A Hands-on Introduction to Fine-Grained Reactivity](https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf). Ryan also does [livestreams](https://www.youtube.com/c/RyanCarniato9/videos) covering various aspects of fine-grained reactivity and the approaches taken by various frontend frameworks. The Reactive Hypertext Literal used in this notebook is based on [@observablehq/htl](https://github.com/observablehq/htl) and [@preact/signals-core](https://github.com/preactjs/signals/blob/main/packages/core/src/index.ts), and you can find the code [here](https://gist.github.com/yurivish/9466900e12fff8be69e9b6318d573200). For more about Preact Signals, see their [official docs](https://preactjs.com/guide/v10/signals) and announcement [blog post](https://preactjs.com/blog/introducing-signals).30:T754,listDiff = function(opts) { //The MIT License (MIT) //Copyright (c) 2015 Simon Friis Vindum var actions = [], aIdx = {}, bIdx = {}, a = opts.old, b = opts.cur, key = opts.extractKey, i, j; // Create a mapping from keys to their position in the old list for (i = 0; i < a.length; i++) { aIdx[key(a[i])] = i; } // Create a mapping from keys to their position in the new list for (i = 0; i < b.length; i++) { bIdx[key(b[i])] = i; } for (i = j = 0; i !== a.length || j !== b.length;) { var aElm = a[i], bElm = b[j]; if (aElm === null) { // This is a element that has been moved to earlier in the list i++; } else if (b.length <= j) { // No more elements in new, this is a delete opts.remove(i); i++; } else if (a.length <= i) { // No more elements in old, this is an addition opts.add(bElm, i); j++; } else if (key(aElm) === key(bElm)) { // No difference, we move on i++; j++; } else { // Look for the current element at this location in the new list // This gives us the idx of where this element should be var curElmInNew = bIdx[key(aElm)]; // Look for the the wanted elment at this location in the old list // This gives us the idx of where the wanted element is now var wantedElmInOld = aIdx[key(bElm)]; if (curElmInNew === undefined) { // Current element is not in new list, it has been removed opts.remove(i); i++; } else if (wantedElmInOld === undefined) { // New element is not in old list, it has been added opts.add(bElm, i); j++; } else { // Element is in both lists, it has been moved opts.move(wantedElmInOld, i); a[wantedElmInOld] = null; j++; } } } return actions; };31:[{"id":"d63f29b9bdf1587c2dc2816f98cebf322c809b2fbb1aa0bad546372ded7573247f78464c6fe249d0f1389e50422b201b69c791b556b5a10ee97f68cbd868bcda","href":"https://static.observableusercontent.com/files/d63f29b9bdf1587c2dc2816f98cebf322c809b2fbb1aa0bad546372ded7573247f78464c6fe249d0f1389e50422b201b69c791b556b5a10ee97f68cbd868bcda","name":"bundle@1.js","type":"application/javascript","lastModified":1694629458856.009,"size":40736}] 2d:{"id":"9f40d5f7ddf5b8a0","slug":null,"title":"Reactive Hypertext Literal","thumbnail":"c4ec73bf24788ca287e6f2175508c62be01ffaf83cc698e2afd322b3256b63fd","access_level":"public","create_time":"$D2023-09-13T18:24:18.856Z","update_time":"$D2023-10-01T19:13:51.829Z","view_time":null,"first_public_time":"$D2023-09-13T18:24:18.856Z","fork":{"id":"5b78003f0f9d3955","slug":"reactive-htl","title":"Reactive Hypertext Literal","owner":{"id":"106fc7e7a0f11e48","login":"yurivish","name":"Yuri Vishnevsky"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4e8eb6188a86a7df","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":"starter_2024"},"version":1181,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null}],"members":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Reactive Hypertext Literal","cells":[{"id":360,"value":"# Reactive Hypertext Literal\n\nObservable has a reactive runtime that operates at the level of individual cells. This means that HTML cells that reference other cells are re-evaluated in their entirety whenever their dependencies change.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":442,"value":"viewof range = Inputs.range([0, 100], { label: \"Pick a number\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":487,"value":"For example, each time this number changes, the entire HTML fragment below is recomputed, even though most of the HTML stays the same:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":440,"value":"html`You picked ${range}!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"Inspired by reactive frameworks like [SolidJS](https://www.solidjs.com) and [Svelte](https://svelte.dev), I wanted to see how hard it would be to add fine-grained reactivity support to Observable's fantastic [hypertext literal](https://github.com/observablehq/htl). \n\nI took a lightweight reactive signals library, [Preact Signals](https://preactjs.com/blog/introducing-signals), and special-cased interpolated signals using a patched version of [htl](https://github.com/observablehq/htl), adding reactive [effects](https://preactjs.com/guide/v10/signals#effect-fn) that granularly observe signal values and make targeted mutations to styles, properties, attributes, and DOM nodes in response to any changes.\n\nYou can play with it in this notebook, and the code is [here](https://github.com/yurivish/reactive-htl). \n\nLet's redo the example above, this time interpolating a signal into the hypertext literal:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1133,"value":"rmd = function (template) {\n return (strings = [],...args) => { \n const values = args.map(d => d.subscribe !=null ? html`${d}`: d); \n return template(strings,...values);\n }\n}(md)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1124,"value":"rmd`MD\n\n- ${CountingComponent()}\n- **${rangeSignal}**`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"html`You picked ${rangeSignal}!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"Inputs.bind(\n Inputs.range([0, 100], { label: \"Pick a number\", step: 1 }),\n viewof range\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"As you slide the slider, notice how, unlike before, the update is granular, so the evaluation indicator to the left of the cell never fires.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":465,"value":"rangeSignal = {\n // Create a signal\n const s = signal(50);\n\n // Update the signal on input events from the range slider\n const changed = (e) => (s.value = e.target.value);\n viewof range.addEventListener(\"input\", changed);\n invalidation.then(() => viewof range.removeEventListener(\"input\", changed));\n\n // Return the signal\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":531,"value":"One subtlety of this approach is that it requires paying some attention to resource handling in order to avoid memory leaks, since we want to ensure that the signal effect handlers created by a reactive literal are properly disposed when it is removed from the DOM.\n\nThis can be done with a new function, `mount`.\n\nIt takes two arguments: a “component” function returning a reactive literal, and a parent element to mount into. Any reactive element inside a mounted component will have its signal effect handlers disposed automatically when that element is detached from its parent.\n\nHere's how we would mount the reactive literal we saw earlier:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":468,"value":"{\n const root = html`

`;\n const dispose = mount(() => html`You picked ${rangeSignal}!`, root);\n invalidation.then(dispose);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":538,"value":"The `mount` function can also help manage other component-level resources like timeouts and long-lived requests.\n\nA mounted component can use `onUnmount` to add a cleanup handler to be invoked when the component is removed from the DOM. \n\nThis allows you to do fun stuff like create local timers inside of component functions, as in this recreation of a standard [SolidJS example](https://www.solidjs.com/examples/counter):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":544,"value":"{\n const root = html`

`;\n // When this cell is invalidated, run the dispose function returned by mount\n invalidation.then(mount(() => html`

${CountingComponent()} and ${rangeSignal} and ${CountingComponent()}

`, root));\n //invalidation.then(mount(CountingComponent, root));\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"CountingComponent = () => {\n const count = signal(0);\n const interval = setInterval(() => (count.value = count.value + 1), 1000);\n const cleanup = () => {console.log(\"cleared....\"); clearInterval(interval);}\n return onUnmount(html`

Count value is ${count}!

`, cleanup);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"As a slightly larger example, here's the Todo List demo from the [Preact](https://preactjs.com/) home page:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":716,"value":"{\n const root = html`

`;\n invalidation.then(mount(TodoList, root));\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":713,"value":"function TodoList() {\n const todos = signal([]);\n const text = signal(\"\");\n const setText = (e) => (text.value = e.target.value);\n const addTodo = (e) => {\n e.preventDefault();\n if (text.value === \"\") return;\n todos.value = todos.value.concat({ text: text.value });\n text.value = \"\";\n };\n return html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1163,"value":"viewof comments = Inputs.textarea({\n rows: 10,\n minlength: 40,\n value: `**Useful Resources:**\n- [ObservableHQ](https://www.observablehq.com)\n- [d3](https://d3js.org/)\n- [d3 Examples Gallery](https://observablehq.com/@d3/gallery)\n`\n });\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"commentsSignal = {\n // Create a signal\n const s = signal('init');\n\n // Update the signal on input events from the range slider\n const changed = (e) => (s.value = e.target.value);\n viewof comments.addEventListener(\"input\", changed);\n invalidation.then(() => viewof comments.removeEventListener(\"input\", changed));\n\n // Return the signal\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1150,"value":"{\n const currentTime = rangeSignal\n const slider = Inputs.range([0, 10], { step: 1 });\n const formatSatisfaction = (v) => {\n return v < 3 ? \":-(\" : v < 5 ? \":-|\" : v < 7 ? \":-)\" : \":-*\";\n // return [v < 3 ? \":-(\" : v < 5 ? \":-|\" : v < 7 ? \":-)\" : \":-*\", \" \", v];\n };\n\n return rmd`\nThis markdown cell shows how static markdown can be combined with dynamic values without cells reloading.\n\nCurrent GMT Time: ${currentTime}\n\n| Your satisfaction level is from 10)\n|-------------\n| ${slider} | a\n\n|Please leave a comment: | Raw content of your comment:\n|------------------------|-------------\n| |

${commentsSignal}

\n\n\n|Your Formatted Comment Preview: \n|-------------------------------------\n| ${computed(() => md([commentsSignal.value]))}\n\n*Thank you for watching!*\n\n---\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":583,"value":"---\n\n### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"html = rhtl.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"svg = rhtl.svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":354,"value":"mount = rhtl.mount","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":945,"value":"onUnmount = rhtl.onUnmount","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"batch = rhtl.batch","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"computed = rhtl.computed","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"effect = rhtl.effect","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"signal = rhtl.signal","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"defineCustomElement = rhtl.defineCustomElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1034,"value":"p = rhtl.p // helper function for easier access to console.log","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"rhtl = import(await FileAttachment(\"bundle@1.js\").url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1111,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"