31:[] 2f:{"title":"Hypertext literal reconciliation with nanomorph","cells":[{"id":0,"value":"md`\n# Hypertext literal reconciliation with nanomorph\n\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 retrieve the previous DOM state allowing us to diff from the previous cell UI state. \n\n~~~js\nimport {reconcile, html} from '@tomlarkworthy/reconcile-nanomorph'\n~~~\n\nThis library was used to build a [reactive unit testing framework](https://observablehq.com/@tomlarkworthy/testing).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`\n## Demo of problem\n\nIf we have some state defined elsewhere, say a list of messages:-\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"mutable msgs = [\"How are you?\", \"I am great!, loving Observable\"]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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 htl.html`\n ${msgs.map((msg) => htl.html`

${msg}

`)}\n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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 HTMLElement. 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 just 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 target. \n\nThe reconciliation algorithm will use the \"id\" attribute to guide matching.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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(\n this,\n htl.html`\n ${msgs.map((msg) => htl.html`

${msg}

`)}\n \n \n `\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"md`\n## It works!\nNow state is not lost, the focus remains on the text component, __though the text is cleared__ (a slight difference to the original [reconcile prototype](https://observablehq.com/@tomlarkworthy/reconcile))\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`\n### Implementation Notes\n\n- Unlike React the \"id\" attribute is used 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 try to reconcile with a live DOM element, you have to make sure the types match (e.g. DIV to DIV) so the element can be updated in place.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"morph = require('https://bundle.run/nanomorph@5.4.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"function reconcile(current, target, options) {\n if (\n !current ||\n !target ||\n current.nodeType != target.nodeType ||\n current.nodeName != target.nodeName ||\n current.namespaceURI != target.namespaceURI\n ) {\n if (current && target && current.nodeName != target.nodeName) {\n console.log(\"Cannot reconcile\", current.nodeName, target.nodeName);\n }\n return target;\n }\n return morph(current, target, options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"md `# Tests`","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"attributeCreate = {\n const current = htl.html`

`;\n const target = htl.html`

`;\n const reconciled = reconcile(current, target);\n console.log(reconciled);\n return reconciled.getAttribute(\"foo\") == \"1\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"attributeRemoved = {\n const current = htl.html`

`;\n const target = htl.html`

`;\n const reconciled = reconcile(current, target);\n return reconciled.getAttribute(\"foo\") === null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"attributeUpdate = {\n const current = htl.html`

`;\n const target = htl.html`

`;\n const reconciled = reconcile(current, target);\n return reconciled.getAttribute(\"foo\") == \"1\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"attributesCRUD = {\n const current = htl.html`

`;\n const target = htl.html`

`;\n const reconciled = reconcile(current, target);\n return (\n reconciled.getAttribute(\"foo\") == null &&\n reconciled.getAttribute(\"bar\") == \"2\" &&\n reconciled.getAttribute(\"baz\") == \"3\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"childUpdateInPlace = {\n const current = htl.html`

`;\n const target = htl.html`

`;\n const beforeReconciliation = current.firstChild;\n const reconciled = reconcile(current, target);\n return (\n reconciled.firstChild === beforeReconciliation &&\n reconciled.firstChild.firstChild.wholeText === \"1\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"childAdded = {\n const current = htl.html`

`;\n const target = htl.html`

`;\n const reconciled = reconcile(current, target);\n return reconciled.firstChild.firstChild.wholeText === \"1\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"childRemoved = {\n const current = htl.html`

`;\n const target = htl.html`

`;\n const reconciled = reconcile(current, target);\n return reconciled.firstChild == null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"keyedChildUpdateInPlace = {\n const current = htl.html`

`;\n const target = htl.html`

`;\n const beforeReconciliation = current.firstChild;\n const reconciled = reconcile(current, target);\n return reconciled.firstChild.nextSibling === beforeReconciliation;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"DOMUpdateInPlaceDOM = htl.html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"DOMUpdateInPlace = {\n DOMUpdateInPlaceDOM\n \n const current = document.getElementById(\"DOMUpdateInPlace\")\n const target = html`

`\n const reconciled = reconcile(current, target);\n return current === reconciled\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"NestedDOMUpdateInPlaceDOM = html`\n

\n raw\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"NestedDOMUpdateInPlace = {\n NestedDOMUpdateInPlaceDOM\n \n const current = document.getElementById(\"NestedDOMUpdateInPlace\")\n const target = html`

\n new\n

`\n reconcile(current, target);\n return current.textContent.includes(\"new\")\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}