2d:null 2e:["$","title",null,{"children":"Hypertext literal reconciliation (Native DOM Diffing) | Kasi Viswanath | Observable"}] 33:T1062,function reconcile(current, target) { // Some differences cannot be reconciled in place, return the target console.log(current); console.log("---"); console.log(target); if ( !current || !target || current.nodeType != target.nodeType || current.nodeName != target.nodeName || current.namespaceURI != target.namespaceURI ) { if (current && target && current.nodeName != target.nodeName) { console.log("Cannot reconcile", current.nodeName, target.nodeName); } return target; } const hasChildren = current.firstChild || target.firstChild; const hasAttibutes = current.hasAttributes || target.hasAttributes; if (current.nodeType === Node.TEXT_NODE) { current.nodeValue = target.nodeValue; } if (hasAttibutes) { function indexAttributes(attributes) { const index = {}; for (let i = attributes.length - 1; i >= 0; i--) { index[attributes[i].name] = attributes[i].value; } return index; } const currentAttributes = indexAttributes(current.attributes); const targetAttributes = indexAttributes(target.attributes); const unionAttributeNames = new Set([ ...Object.keys(currentAttributes), ...Object.keys(targetAttributes) ]); for (let attributeName of unionAttributeNames) { if (targetAttributes[attributeName]) { if ( targetAttributes[attributeName] !== currentAttributes[attributeName] ) { current.setAttribute(attributeName, targetAttributes[attributeName]); } } else { current.removeAttribute(attributeName); } } } for (let prop in target) { // Events like onkeydown need to be copied over if (prop.startsWith("on")) { if (current[prop] !== target[prop]) { current[prop] = target[prop]; } } } // Index the children for reconciliation (if we have children) if (hasChildren) { function indexChildren(parent) { const indexChildren = {}; // Collect children looking for key attribute let index = 0; for (let child = parent.firstChild; child; child = child.nextSibling) { const key = child.hasAttributes && child.getAttribute("key") ? child.getAttribute("key") : "$" + index; indexChildren[key] = { node: child, index }; index++; } return indexChildren; } const currentChildren = indexChildren(current); const targetChildren = indexChildren(target); // Create a new set of children, indexed by position const newChildren = {}; // Generate reconciliation children and their ordering const currentKeys = Object.keys(currentChildren); const targetKeys = Object.keys(targetChildren); const unionKeys = new Set([...currentKeys, ...targetKeys]); for (let key of unionKeys) { const currentChild = (currentChildren[key] || {}).node; const targetChild = (targetChildren[key] || {}).node; const reconciledChild = reconcile(currentChild, targetChild); if (currentChild && reconciledChild !== currentChild) { current.removeChild(currentChild); } if (reconciledChild) newChildren[targetChildren[key].index] = reconciledChild; } // Now we walk through the existing children, // trying to avoid moving them if they already in right place // This is fairly simple and probably does not scale to complex use cases let curser = current.firstChild; for (let i = 0; i < targetKeys.length; i++) { if (curser === null) { current.append(newChildren[i]); } else { if (curser === newChildren[i]) { // Child is already in right place, no structural change in DOM required curser = curser.nextSibling; } else { // as we pruned unnecissary children already // if there is a mismatch it probably implies the target is bigger // If the element was in the current DOM it is moved // If the element was in the target DOM it is added current.insertBefore(newChildren[i], curser); } } } } return current; }34:[] 31:{"id":"481b2e0ca2b5aa00","slug":"reconcile","title":"Hypertext literal reconciliation (Native DOM Diffing)","thumbnail":"c26f1a94405920dae56bd03e219ec170b41f242da549512d65a8eace9115f391","access_level":"public","create_time":"$D2022-05-25T19:07:59.126Z","update_time":"$D2022-05-26T05:15:36.226Z","view_time":null,"first_public_time":"$D2022-05-25T19:08:27.701Z","has_unpublished_edits":null,"fork":{"id":"f1584a0498b01072","slug":"reconcile","title":"Hypertext literal reconciliation (Native DOM Diffing)","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":"starter_2024"},"version":698,"publish_version":698,"role":null,"authored":false,"authors":[{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null}],"members":[{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hypertext literal reconciliation (Native DOM Diffing)","cells":[{"id":0,"value":"md`\n# Hypertext literal reconciliation (Native DOM Diffing)\n\nI love the [hypertext literal](https://observablehq.com/@observablehq/htl). It is intuitive. However, naive application of it tends to invalidate state between renders leading to poor UX.\n\nReact solved this problem with a [reconciliation](https://reactjs.org/docs/reconciliation.html) algorithm. However, React is very complicated and does not gel with Observable.\n\nThis notebook is an idea to try and get a React-like reconciliation algorithm applied to the hypertext literal in an Observable native way. We exploit the \\`this\\` variable to retrevie the previous DOM state allowing us to diff from the previous cell UI state. \n\nIt in the experimental state so leave comments if on areas where it does not work and we can try to fix it.\n\n~~~js\nimport {reconcile, html} from '@tomlarkworthy/reconcile'\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`\n## Demo of problem\n\nIf we have some state defined elsehwere, say a list of messages:-\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"mutable msgs = [\"How are you?\", \"I am great!, loving Observable\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`\nWe can create a very simple chat UI using the hypertext literal to change this external state. I love this construction as it can hold its own state and helper functions. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"{\n async function sendMsg(evt) {\n if (evt.keyCode === 13) {\n console.log(msgs)\n mutable msgs = msgs.concat([evt.target.value]);\n }\n }\n return html`\n ${msgs.map(msg => html`

${msg}

`)}\n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`\nThis is very simple to understand, but there are some problems with the UX. After sending a message, the focus of the cursor is lost. This is because when the list changes, the HTML is rebuilt from scratch, and all DOM state is lost, including the focus. So its impossible to send lots of messages in a row, you keep having to click back into the text area!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`\n## Solution Attempt\n\nCreate a custom \\`reconcile\\` function for DOM state diffing. Unlike React and Preact, we do not use a virtual DOM. Instead we compare the previous DOM state to the new hypertext literal HTML fragment. You can get the previous state of a cell with the keyword [\\`this\\`](https://talk.observablehq.com/t/get-the-previous-value-of-a-cell-when-its-edited-and-saved/792).\n\nTo reuse the previous state and apply a diff we add \n\n reconcile(this, )\n\nwhere we previously jsut did\n\n \n\nto the implementation. Reconcile changes DOM node at 'this' to look like and returns it, if possible, otherwise it just returns the HTML target fragment. \n\nLike (P)React reconciliation algorithm will look for the \"key\" attribute to guide matching.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"{\n function sendMsg(evt) {\n if (evt.keyCode === 13) {\n console.log(msgs)\n mutable msgs = msgs.concat([evt.target.value]);\n }\n }\n return reconcile(this, html`\n ${msgs.map(msg => html`

${msg}

`)}\n \n \n `);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`\n## It works!\nNow state is not lost, the focus remains on the text component and the text feild is not cleared!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"md`\n### Implementation Notes\n\n- Like React we use an attribute \"key\" to guide element matching.\n\n- event handlers like onclick are implemented by hypertext literal as assignment to node properties (not HTML attributes), which is why existing DOM diffs won't work (they work at HTMLElement level).\n\n- If you move a child using insertBefore, focus is lost. For this implementation I try to avoid making these changes, but it means if the sort order changes you cannot avoid dettaching some children and they will lose focus.\n\n- If you try to reconcile with a live DOM element, you have to make sure the types match (e.g. DIV to DIV).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"md `# Tests`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"attribteCreate = {\n const current = html.fragment`