2f:[] 2d:{"title":"HTL DOM node interpolation bug","cells":[{"id":0,"value":"# HTL DOM node interpolation bug","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"test(htl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"test(htlFixed)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":215,"value":"## Performance tests","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":227,"value":"perfTest('htl', htl, dimensions.columns, dimensions.rows)","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"perfTest('htlFixed', htlFixed, dimensions.columns, dimensions.rows)","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"import { form } from '1dc9d988fa3f63ed'","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"## Use cases","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":585,"value":"useCase1(htl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"useCase1(htlFixed)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":579,"value":"useCase2(htl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":581,"value":"useCase2(htlFixed)","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W2f","stdlib":"1","titling":"auto"}