27:null 28:["$","title",null,{"children":"HTL DOM node interpolation bug | lionel-rowe | Observable"}] 2d:[] 2b:{"id":"a56e4d1c697a45e7","slug":null,"title":"HTL DOM node interpolation bug","thumbnail":"08bcf4927c65a48d395daa9796718fdc7104efe2fa4fc378fd63cf2c742fad5e","access_level":"public","create_time":"$D2023-02-04T05:12:53.550Z","update_time":"$D2023-02-06T02:04:29.722Z","view_time":null,"first_public_time":"$D2023-02-04T05:12:53.550Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"07056da88075f406","login":"lionel-rowe","name":"","avatar_url":"https://avatars-next.observableusercontent.com/aa4ec4e1a2d7d69f33f38b676bb90365e5df5964535a4844e34d5392282699c2","tier":"starter_2024"},"version":600,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"764d323226e5744a","login":"lionel-rowe","name":"","avatar_url":"https://avatars-next.observableusercontent.com/aa4ec4e1a2d7d69f33f38b676bb90365e5df5964535a4844e34d5392282699c2","tier":null}],"members":[{"type":"individual","id":"764d323226e5744a","login":"lionel-rowe","name":"","avatar_url":"https://avatars-next.observableusercontent.com/aa4ec4e1a2d7d69f33f38b676bb90365e5df5964535a4844e34d5392282699c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"HTL DOM node interpolation bug","cells":[{"id":0,"value":"# HTL DOM node interpolation bug","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"test(htl)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"test(htlFixed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"htlFixed = {\n function cloneDeep(x) {\n if (Array.isArray(x) || x instanceof NodeList || x instanceof HTMLCollection) {\n return [...x].map(cloneDeep);\n }\n \n return x instanceof Node ? x.cloneNode(true) : x;\n }\n\n return {\n html: ({ raw }, ...args) => htl.html({ raw }, ...args.map(cloneDeep))\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"test = (htl) => {\n const char = 'x'\n const length = 2\n\n const textNode = htl.html`${char}`\n const result = eval(`htl.html\\`${'${textNode}'.repeat(length)}\\``)\n const result2 = htl.html`${Array.from({ length }, () => textNode)}`\n \n const expected = char.repeat(length)\n \n const ok = [result, result2].every(x => x.textContent === expected)\n\n return [\n ok ? '✅' : '❌',\n `result: ${result.textContent}`,\n !ok && `(expected ${expected})`,\n ].filter(Boolean).join(' ')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"## Performance tests","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"function* perfTest(name, htl, columns, rows) {\n const time = Date.now()\n\n yield htl.html`Calculating...`\n \n htl.html`\n \n ${\n Array.from({ length: rows }, () => htl.html`${\n Array.from({ length: columns }, () => htl.html``)\n }`)\n }\n \n

`\n \n yield htl.html`${name} rendered ${columns.toLocaleString()} columns × ${rows.toLocaleString()} rows (${(columns * rows).toLocaleString()} DOM elements) in ${(Date.now() - time).toLocaleString()} ms (lower is better)`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"viewof dimensions = form({\n columns: Inputs.number({ value: 100, step: 1, label: 'Columns' }),\n rows: Inputs.number({ value: 100, step: 1, label: 'Rows' }),\n}, { id: 'form' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"perfTest('htl', htl, dimensions.columns, dimensions.rows)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"perfTest('htlFixed', htlFixed, dimensions.columns, dimensions.rows)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"import { form } from '1dc9d988fa3f63ed'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"## Use cases","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":583,"value":"useCase1 = (htl) => {\n const visuallySelectableSpan = htl.html` `\n const wrap = (el) => htl.html`${[visuallySelectableSpan, el, visuallySelectableSpan]}`\n const visuallySelectableCheckBox = htl.html`${wrap(htl.html``)}`\n return visuallySelectableCheckBox\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"useCase1(htl)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"useCase1(htlFixed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"useCase2 = (htl) => {\n const delim = htl.html``\n const prettyList = (strs) => strs.flatMap((str, i) => i ? [delim, str] : str)\n return htl.html`${prettyList(['one', 'two', 'three', 'four'])}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"useCase2(htl)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"useCase2(htlFixed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"