28:null 29:["$","title",null,{"children":"Reactive Hypertext Literal | Yuri Vishnevsky | Observable"}] 2e: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).2f:[{"id":"cf9e8d36761be253dd7aceaea41efe47a2af395f595107c69f1fa3dffbdf255a8f06b0ea705f56849f912b138ed9a308d5503134fc7c553495c77b8a3d8e29e7","href":"https://static.observableusercontent.com/files/cf9e8d36761be253dd7aceaea41efe47a2af395f595107c69f1fa3dffbdf255a8f06b0ea705f56849f912b138ed9a308d5503134fc7c553495c77b8a3d8e29e7","name":"reactive-htl@6.bundle.js","type":"application/javascript","lastModified":1664482686120.364,"size":31204},{"id":"64ee5e6190c7603ee01e99682eaf7023ca384285a6fced39c7069d6dd346624f34bd13273ab9f9e63bfe4143d214d9a4db546af428ba4971c61492f8e61b3324","href":"https://static.observableusercontent.com/files/64ee5e6190c7603ee01e99682eaf7023ca384285a6fced39c7069d6dd346624f34bd13273ab9f9e63bfe4143d214d9a4db546af428ba4971c61492f8e61b3324","name":"reactive-htl@5.bundle.js","type":"application/javascript","lastModified":1664482070436.827,"size":31202},{"id":"748aab6f78ba1be66157e2efd77380df37348640e21c0005e10dd21e064f45e26ae9b29b7d48f65c5e7e011178835ebb9fbc04a3aa17001dc6f1e76993c2d1f9","href":"https://static.observableusercontent.com/files/748aab6f78ba1be66157e2efd77380df37348640e21c0005e10dd21e064f45e26ae9b29b7d48f65c5e7e011178835ebb9fbc04a3aa17001dc6f1e76993c2d1f9","name":"reactive-htl@4.bundle.js","type":"application/javascript","lastModified":1664475280448.851,"size":31244},{"id":"dba3666f6a057bfb448b6a7741161eb228dfa9f9b7bcd6e3b88578141fba5d90194d510f66cbbdda05911cfd364a621f2a4a9a79c774b01119b18ed07bd10dba","href":"https://static.observableusercontent.com/files/dba3666f6a057bfb448b6a7741161eb228dfa9f9b7bcd6e3b88578141fba5d90194d510f66cbbdda05911cfd364a621f2a4a9a79c774b01119b18ed07bd10dba","name":"reactive-htl@7.bundle.js","type":"application/javascript","lastModified":1664490499947.452,"size":31320},{"id":"a1a8e61b85c4b1c9a85e76a2b53ea002f5198d6efd550b2add15476219aa323faa45922a78326a62dc9d694367ac65dce9e4d96cfba2fc2c3c9460d0e225f526","href":"https://static.observableusercontent.com/files/a1a8e61b85c4b1c9a85e76a2b53ea002f5198d6efd550b2add15476219aa323faa45922a78326a62dc9d694367ac65dce9e4d96cfba2fc2c3c9460d0e225f526","name":"reactive-htl@8.bundle.js","type":"application/javascript","lastModified":1664491508505.135,"size":11510},{"id":"b9f4cd626bf68418c1f9adb37b2960bfebd33ccb3fc901ef15379af941614c595119e75f1fb9c3880d4d718e854b2dc46426b13d133c32af9b4390072e1de688","href":"https://static.observableusercontent.com/files/b9f4cd626bf68418c1f9adb37b2960bfebd33ccb3fc901ef15379af941614c595119e75f1fb9c3880d4d718e854b2dc46426b13d133c32af9b4390072e1de688","name":"reactive-htl@11.bundle.js","type":"application/javascript","lastModified":1664503877688.936,"size":32734},{"id":"23a0efd4f5a3852461ff3d1122f5a9eb0bf8c7edb4a6caba0ca570c87ee3298451899c943c480c5e0d3789950ddd436a924965dc08430836769d6d5755a458ef","href":"https://static.observableusercontent.com/files/23a0efd4f5a3852461ff3d1122f5a9eb0bf8c7edb4a6caba0ca570c87ee3298451899c943c480c5e0d3789950ddd436a924965dc08430836769d6d5755a458ef","name":"reactive-htl@12.bundle.js","type":"application/javascript","lastModified":1664504103509.294,"size":32248},{"id":"7272eb4d64b706503e29e4c36c7b1726d31653b391a4bed0a933ff49230a91328f80d90a0e4f8610dc8c8ac8dc0824dc328c2fd0909a8abdb8c7cb30757c3264","href":"https://static.observableusercontent.com/files/7272eb4d64b706503e29e4c36c7b1726d31653b391a4bed0a933ff49230a91328f80d90a0e4f8610dc8c8ac8dc0824dc328c2fd0909a8abdb8c7cb30757c3264","name":"reactive-htl@18.bundle.js","type":"application/javascript","lastModified":1664544437525.566,"size":32388},{"id":"23a0efd4f5a3852461ff3d1122f5a9eb0bf8c7edb4a6caba0ca570c87ee3298451899c943c480c5e0d3789950ddd436a924965dc08430836769d6d5755a458ef","href":"https://static.observableusercontent.com/files/23a0efd4f5a3852461ff3d1122f5a9eb0bf8c7edb4a6caba0ca570c87ee3298451899c943c480c5e0d3789950ddd436a924965dc08430836769d6d5755a458ef","name":"reactive-htl@13.bundle.js","type":"application/javascript","lastModified":1664504368760.237,"size":32248},{"id":"55b4c566af57761793592b59077904632123b88ea7ebb117485ef930229263e48bab73bd0eb69e373318a950dd5e79053d36ceb70a54d6fc2d79fc82ca346d0f","href":"https://static.observableusercontent.com/files/55b4c566af57761793592b59077904632123b88ea7ebb117485ef930229263e48bab73bd0eb69e373318a950dd5e79053d36ceb70a54d6fc2d79fc82ca346d0f","name":"reactive-htl@15.bundle.js","type":"application/javascript","lastModified":1664506826422.778,"size":32364},{"id":"02cfbd77c7d0b6a2114de5eb7a26ba26546f30156cf8a0e2ff1033e01062057b70dfd29927cb64c2b0c6815f59a840a088ca1d0875cfe64e3f55190ec81c9cb9","href":"https://static.observableusercontent.com/files/02cfbd77c7d0b6a2114de5eb7a26ba26546f30156cf8a0e2ff1033e01062057b70dfd29927cb64c2b0c6815f59a840a088ca1d0875cfe64e3f55190ec81c9cb9","name":"reactive-htl@16.bundle.js","type":"application/javascript","lastModified":1664510400955.156,"size":32366},{"id":"a1915b0913898e5027eec6269074b8a9a42940356610892699bfe605775d53ad93274fc9ce2c46c2206468989e824c1f1f9df71219bb296e41a3406a6e181317","href":"https://static.observableusercontent.com/files/a1915b0913898e5027eec6269074b8a9a42940356610892699bfe605775d53ad93274fc9ce2c46c2206468989e824c1f1f9df71219bb296e41a3406a6e181317","name":"reactive-htl@14.bundle.js","type":"application/javascript","lastModified":1664505058264.887,"size":32049},{"id":"34a853897249aa3ebfd221df50dbbb9c0ca1a42c23d8f0ff89f4339224809e87201a166398deb5489f7790a4ae260c5a25c300957194e3d8615426ed9603c1f7","href":"https://static.observableusercontent.com/files/34a853897249aa3ebfd221df50dbbb9c0ca1a42c23d8f0ff89f4339224809e87201a166398deb5489f7790a4ae260c5a25c300957194e3d8615426ed9603c1f7","name":"reactive-htl@17.bundle.js","type":"application/javascript","lastModified":1664510525551.638,"size":32341},{"id":"b9016f631388577fd55933cc4301dad851ee6099dafaf03a7654800f02d434e0478070fc6ae1c8ffd82b1ae2628e125f99db8ec3185a99296bffe1e2e148c9ff","href":"https://static.observableusercontent.com/files/b9016f631388577fd55933cc4301dad851ee6099dafaf03a7654800f02d434e0478070fc6ae1c8ffd82b1ae2628e125f99db8ec3185a99296bffe1e2e148c9ff","name":"reactive-htl@9.bundle.js","type":"application/javascript","lastModified":1664496677779.035,"size":31576},{"id":"d3fe573ed6a186a3499cd53c0b787c6108bd53f7d587685d8cb4da0fa4ab4b5aad55971875410870647393fc22f08be45352173a67d8120a6678a9d416d0c192","href":"https://static.observableusercontent.com/files/d3fe573ed6a186a3499cd53c0b787c6108bd53f7d587685d8cb4da0fa4ab4b5aad55971875410870647393fc22f08be45352173a67d8120a6678a9d416d0c192","name":"reactive-htl@19.bundle.js","type":"application/javascript","lastModified":1664545921010.01,"size":32702},{"id":"4aab080f5a3b9f708f3f15b58837766714bdb624ca8385eb2babb15a69c135e1e6e9e30ee349fbbe096105e3272cc3af97f0f6d62b6fd86ace1a0e2d46df99c9","href":"https://static.observableusercontent.com/files/4aab080f5a3b9f708f3f15b58837766714bdb624ca8385eb2babb15a69c135e1e6e9e30ee349fbbe096105e3272cc3af97f0f6d62b6fd86ace1a0e2d46df99c9","name":"reactive-htl@20.bundle.js","type":"application/javascript","lastModified":1664547132580.093,"size":32700},{"id":"4d6ac3244c72e11362d49208e2e36953f28d10ffd7f0f429dd7b07fd1f3a28a152858714a69bda284c927359ccd27d153110876667d3466fb5b19a3249eb32cc","href":"https://static.observableusercontent.com/files/4d6ac3244c72e11362d49208e2e36953f28d10ffd7f0f429dd7b07fd1f3a28a152858714a69bda284c927359ccd27d153110876667d3466fb5b19a3249eb32cc","name":"reactive-htl@10.bundle.js","type":"application/javascript","lastModified":1664497870194.618,"size":31599},{"id":"6861f715ab5c07064c6f0361388df0046d399df419bca9fbeec6d7442179faf8e69af256f016b9073eafdfa584f33ace49c3f483c5b21b67087acfd76dfbce34","href":"https://static.observableusercontent.com/files/6861f715ab5c07064c6f0361388df0046d399df419bca9fbeec6d7442179faf8e69af256f016b9073eafdfa584f33ace49c3f483c5b21b67087acfd76dfbce34","name":"reactive-htl@21.bundle.js","type":"application/javascript","lastModified":1664591258654.952,"size":33227},{"id":"65a44ce370e4458fdb55fbc28730fecdabcb3f352a08286ad621d5851b61e56c3256a7e1ff4de2016c2d45f7d44a7fc2cd96f878e21255667b323f88ac06414c","href":"https://static.observableusercontent.com/files/65a44ce370e4458fdb55fbc28730fecdabcb3f352a08286ad621d5851b61e56c3256a7e1ff4de2016c2d45f7d44a7fc2cd96f878e21255667b323f88ac06414c","name":"reactive-htl@24.bundle.js","type":"application/javascript","lastModified":1664641543244.215,"size":33903},{"id":"6861f715ab5c07064c6f0361388df0046d399df419bca9fbeec6d7442179faf8e69af256f016b9073eafdfa584f33ace49c3f483c5b21b67087acfd76dfbce34","href":"https://static.observableusercontent.com/files/6861f715ab5c07064c6f0361388df0046d399df419bca9fbeec6d7442179faf8e69af256f016b9073eafdfa584f33ace49c3f483c5b21b67087acfd76dfbce34","name":"reactive-htl@22.bundle.js","type":"application/javascript","lastModified":1664636009281.246,"size":33227},{"id":"5f71ebd331440a7eac0c76ca71d11767b34add9ab8c462c4cb85e29f96bae13e7ca67b8635d318bb6efac8ba75a8e7d3b1d2b0ca8ff335309cc6f2404a1af677","href":"https://static.observableusercontent.com/files/5f71ebd331440a7eac0c76ca71d11767b34add9ab8c462c4cb85e29f96bae13e7ca67b8635d318bb6efac8ba75a8e7d3b1d2b0ca8ff335309cc6f2404a1af677","name":"reactive-htl@5.bundle.min.js","type":"application/javascript","lastModified":1664642438672.325,"size":12576},{"id":"de067a141b700d0e62884cc345d4ccc7fbfbe1a981274a54108202bfc8ee66c85dfbcd58cd26697dbdfd73e974b0b838b56205270a0ef26ea8e67babf5bed68a","href":"https://static.observableusercontent.com/files/de067a141b700d0e62884cc345d4ccc7fbfbe1a981274a54108202bfc8ee66c85dfbcd58cd26697dbdfd73e974b0b838b56205270a0ef26ea8e67babf5bed68a","name":"reactive-htl@31.bundle.js","type":"application/javascript","lastModified":1664671274343.942,"size":35025},{"id":"ce2bc4068d308edd5977a8a5e13a8306c408564a98046b5ad8d0e8baad9878e7d49ec0eef266f8389e4b254e5523c8efecc3e0b41a66e7dbf3a28254a5e76be5","href":"https://static.observableusercontent.com/files/ce2bc4068d308edd5977a8a5e13a8306c408564a98046b5ad8d0e8baad9878e7d49ec0eef266f8389e4b254e5523c8efecc3e0b41a66e7dbf3a28254a5e76be5","name":"reactive-htl@35.bundle.js","type":"application/javascript","lastModified":1664678642989.024,"size":35489},{"id":"de067a141b700d0e62884cc345d4ccc7fbfbe1a981274a54108202bfc8ee66c85dfbcd58cd26697dbdfd73e974b0b838b56205270a0ef26ea8e67babf5bed68a","href":"https://static.observableusercontent.com/files/de067a141b700d0e62884cc345d4ccc7fbfbe1a981274a54108202bfc8ee66c85dfbcd58cd26697dbdfd73e974b0b838b56205270a0ef26ea8e67babf5bed68a","name":"reactive-htl@32.bundle.js","type":"application/javascript","lastModified":1664671470424.194,"size":35025},{"id":"2f41331af3ab2bb73ed23bb2d91b823fb750fbf5da3eb7ca198e8eb280e508a35148e949266ffff0c8b5a40f0b2ff1c8bab4647acb53f5ea5c0a7f77f5742891","href":"https://static.observableusercontent.com/files/2f41331af3ab2bb73ed23bb2d91b823fb750fbf5da3eb7ca198e8eb280e508a35148e949266ffff0c8b5a40f0b2ff1c8bab4647acb53f5ea5c0a7f77f5742891","name":"reactive-htl@26.bundle.js","type":"application/javascript","lastModified":1664647137627.211,"size":33893},{"id":"2e3d27e0b80afa581eccc305603ba2766454254fab63c83fd6a981dfbc333adcd0f4906b17d22753faa08a9ab55380bde73e0f853bd4f122753cffc33b2bd11a","href":"https://static.observableusercontent.com/files/2e3d27e0b80afa581eccc305603ba2766454254fab63c83fd6a981dfbc333adcd0f4906b17d22753faa08a9ab55380bde73e0f853bd4f122753cffc33b2bd11a","name":"reactive-htl@27.bundle.js","type":"application/javascript","lastModified":1664647329564.61,"size":33890},{"id":"7568b0403c4a4b91d88f4f9a7967cd2338ef581e7209f514259881aa475ffb9ad52ef034bdc4d8acc93e950a0901d2d85fd916d45df7cbc3012b10c68eadc0bc","href":"https://static.observableusercontent.com/files/7568b0403c4a4b91d88f4f9a7967cd2338ef581e7209f514259881aa475ffb9ad52ef034bdc4d8acc93e950a0901d2d85fd916d45df7cbc3012b10c68eadc0bc","name":"reactive-htl@34.bundle.js","type":"application/javascript","lastModified":1664677923089.782,"size":35461},{"id":"316a80de367f9f8268a69b3eff308f7ca37f0176d0e1477596930d8c2f27c479e20b4a48e7690ae67b2aeb26a9476b6509df8477ad454bf35b02531679446925","href":"https://static.observableusercontent.com/files/316a80de367f9f8268a69b3eff308f7ca37f0176d0e1477596930d8c2f27c479e20b4a48e7690ae67b2aeb26a9476b6509df8477ad454bf35b02531679446925","name":"reactive-htl@37.bundle.js","type":"application/javascript","lastModified":1664725180263.552,"size":35627},{"id":"36d523ecc442d1edfc1d756fdd46a02d8462bcf3c8c20f5abc2f27788ac7f008f2298d29ea787b4074408b7ea365044497bfd4c4d03026c4c455e1e27d23b6c3","href":"https://static.observableusercontent.com/files/36d523ecc442d1edfc1d756fdd46a02d8462bcf3c8c20f5abc2f27788ac7f008f2298d29ea787b4074408b7ea365044497bfd4c4d03026c4c455e1e27d23b6c3","name":"reactive-htl@36.bundle.js","type":"application/javascript","lastModified":1664721340935.971,"size":35627},{"id":"14a9a07558ed01ac6ba2aca7250d92a35e52edbd9cef372a5dd2beacc70339a67bfa61311b0bc40fcc48ef1e020e5fa2fdff54c74e319de8f55133b7c208c2a0","href":"https://static.observableusercontent.com/files/14a9a07558ed01ac6ba2aca7250d92a35e52edbd9cef372a5dd2beacc70339a67bfa61311b0bc40fcc48ef1e020e5fa2fdff54c74e319de8f55133b7c208c2a0","name":"reactive-htl@29.bundle.js","type":"application/javascript","lastModified":1664668585946.348,"size":35360},{"id":"6851013911c4a5661392708f241e8bb1876de75be82e5e24c689c1665238941ad331aec334b54e8ec72a5b7670747581c75811a50db28d44db44cec7f1c8eeb2","href":"https://static.observableusercontent.com/files/6851013911c4a5661392708f241e8bb1876de75be82e5e24c689c1665238941ad331aec334b54e8ec72a5b7670747581c75811a50db28d44db44cec7f1c8eeb2","name":"reactive-htl@30.bundle.js","type":"application/javascript","lastModified":1664669985323.217,"size":35025},{"id":"d63f29b9bdf1587c2dc2816f98cebf322c809b2fbb1aa0bad546372ded7573247f78464c6fe249d0f1389e50422b201b69c791b556b5a10ee97f68cbd868bcda","href":"https://static.observableusercontent.com/files/d63f29b9bdf1587c2dc2816f98cebf322c809b2fbb1aa0bad546372ded7573247f78464c6fe249d0f1389e50422b201b69c791b556b5a10ee97f68cbd868bcda","name":"bundle@1.js","type":"application/javascript","lastModified":1671294119968.507,"size":40736}] 2c:{"id":"5b78003f0f9d3955","slug":"reactive-htl","title":"Reactive Hypertext Literal","thumbnail":"fee6da270d78f7eec01e61bf3385b8bc1a83c4dc83452cc4b0752bae3f3933ab","access_level":"public","create_time":"$D2022-09-29T08:08:01.737Z","update_time":"$D2022-12-31T23:34:24.448Z","view_time":null,"first_public_time":"$D2022-09-29T19:20:16.370Z","has_unpublished_edits":null,"fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"106fc7e7a0f11e48","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":"starter_2024"},"version":1110,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null}],"members":[{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"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","output":"","database":"$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","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":440,"value":"html`You picked ${range}!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":482,"value":"html`You picked ${rangeSignal}!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"","database":"$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","output":"$undefined","database":"$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","output":"","database":"$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","output":"$undefined","database":"$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","output":"","database":"$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(CountingComponent, root));\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"CountingComponent = () => {\n const count = signal(0);\n const interval = setInterval(() => (count.value = count.value + 1), 1000);\n const cleanup = () => clearInterval(interval);\n return onUnmount(html`

Count value is ${count}!

`, cleanup);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":578,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":583,"value":"---\n\n### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"html = rhtl.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"svg = rhtl.svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"mount = rhtl.mount","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"onUnmount = rhtl.onUnmount","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"batch = rhtl.batch","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"computed = rhtl.computed","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"effect = rhtl.effect","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"signal = rhtl.signal","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"defineCustomElement = rhtl.defineCustomElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":402,"value":"rhtl = import(await FileAttachment(\"bundle@1.js\").url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"