docs: update makeOnce docs and refactor usage of makeOnce in playground (#73)

Author: tatomyr

README.md

@@ -107,7 +107,7 @@ const wrongCounter = () => {
   return render`
     <div id="root">
       <pre id="count">Counter: ${COUNT}</pre>
-      <button 
+      <button
         ::click=${() =>
           setState(() => ({count: COUNT /* Incorrect value! */ + 1}))}
       >
@@ -130,7 +130,7 @@ const correctCounter = () => {
   return render`
     <div id="root">
       <pre id="counter">Counter: ${COUNT}</pre>
-      <button 
+      <button
         ::click=${() =>
           setState(({count}) => ({count: count /* Correct value! */ + 1}))}
       >
@@ -154,27 +154,26 @@ You can implement the simplest async flow using a tiny helper (you may also impo
 
 ```js
 const makeOnce = () => {
-  const calls = new Set()
-  return (id, query) => {
-    if (!calls.has(id)) {
-      calls.add(id)
+  let lastCalledKey
+  return (key, query) => {
+    if (lastCalledKey !== key) {
+      lastCalledKey = key
       setTimeout(query)
     }
   }
 }
 ```
 
-where `id` is a unique identifier of the async operation and `query` is an asynchronous callback function which gets executed once for the `id`.
+where `key` is a unique identifier of the async operation and `query` is an asynchronous callback function which gets executed once the `key` changes.
 It can be used like this:
 
 ```js
 const {mount, getState, setState} = init({
   spinner: false,
   stargazers_count: "-",
+  url: `https://api.github.com/repos/tatomyr/purity`, // could be changed somewhere in the app
 })
 
-const url = `https://api.github.com/repos/tatomyr/purity`
-
 const getStargazers = async () => {
   try {
     setState(() => ({spinner: true}))
@@ -188,12 +187,13 @@ const getStargazers = async () => {
 const once = makeOnce()
 
 const root = () => {
+  const {url, spinner, stargazers_count} = getState()
   once(url, getStargazers)
 
   return render`
     <div id="root">
       <pre id="stars">
-        ${getState().spinner ? "⌛" : `⭐️: ${getState().stargazers_count}`}
+        ${spinner ? "⌛" : `⭐️: ${stargazers_count}`}
       </pre>
       <button ::click=${getStargazers}>
         Refetch
@@ -205,11 +205,12 @@ const root = () => {
 mount(root)
 ```
 
-You may also check out [the imperative example](https://tatomyr.github.io/purity/playground/#JYWwDg9gTgLgBAb2AO2DANHKBTZATbKTAM2hAEMYAVUbAXzmKghDgHIA6DgehQIA8OAKwDObAFDju3OACp5CxUuUrVa9RuWSAxhGQj4FANbYA8sm3Y4AXjgAKAJQ2AfInFw4u-fG3kANn4iNnDI2ADucADK2DCO7lgxAK5QyPbAeJgAjomEAJ5O1q4I8R7AxPYAhL4BIhwAFuQidukOTsUeHZ7+gRzkeHjNeA4A3CUdIjE0INgQibHZeQ5jdPErK+JeBnATMABK2EzYInXBzcgwBa47AJLnhABu-nY4OPiEmCgXOnpbAOYxADFmCAADIQaqRGDQcj-U4mfIuNwePwxOB4SjkODxGBQXJIjromCY2wAKUipgAchwwOQoBM7H5wf5IdD-hx-jBrjBsCA7PDWqsujBtCc7IQoG0Vh4cDBkqlCZiAD6KxBrb7ebaTCBgiFQqAwqy2PnYXKYBWXfGM3Ws7AcG7c3nwzBkyl2nEoX5lXJ2c1LdbSOSaIPBkOh2TqrbJPzBAAGdRgMDAIgAXNJyGBgOy0HVEgAjDi6EDcHCQETcIlQkC5KDcMDJNC5GMR+AIECzc6YDmQyjYTA7bvczAvXAEKAMWwoNB2dpwLjswHAnXMvUGuxRhzobG0W7cqCPPzJuAABk3HhEGeQoSgh+I-gmp7g4ugh8Sb2IKGwGXEdCWGx+8D0SxgmMMwLGwOI-w1EVsG0Ix9nPH5DQSIJCnxMpKhwWoICMNoxhReBxWCUIIgAUSgZgoDsAAiAAJKgqAABW2CtEiCXQCEPKi4AAamQt1KFYpZOnFDhMMgfQkMwsYRIMASUL42TZREMYYDqZgInFVZ4hlOU+NEPQ4nWTZ4C7IkoF+cgAC9CHkxpcgsewLRnfsK3AxxEWnc8UCvQ8cRyTAn2vOBXwId9QgyNEymIQ8jx-IS4BxPEZw8YzEFk8yrJsgB9XRXxgcc4HIMJyDQRgYhFNcoD8BwOFU3A7Gg2D4PEiZ4pS-9IuIcpbHSizrLpHL23gABaOBTJ7Rx+Iy-qREGvKxlS7RkleGAAGE6hgowABEe2CHbuQ4ZAIDCOJOlSmBtzuPd-GCcbuUmvxGjWjbYP2qwADJ3vsJbyNwZ7NreuBRru8Casegx1oBns2s1GABzci1PLMvrstyjs4HB-7Xp7Q8fpWyHscHbYLx8xg717TriEwC7ph3B5-DisYdiobUmT8Fl9X+Sq-EwBBesyga0YwDGnoJ7acc8Za-rFt6f0FXxhTqMVyNwzoXIm9zUM8knCBvcmAvI59H3IgB+DhphEEQDTgE2TeNscBQ8NVIK2ZgIHgI0nPiQDwKjTsYm7aabPin27DYHBDmONhME1oomZifZI6VgBmI80-iuX2o1PnkYF2ahb7HWiHt6AzSi6nLt3fdMExmWewKkHTs8DqaewEjHqTT89p7Q7jvc0ba5e8XuUkaUkhSBI3igJtOgAHjwYB7jgdJrCot2YCo5wxg8WewBwZe8FX9KRE37eOgAEgQQKbfYQBeDcAar22DgQ8vMvQgb7YQBsYifw82EABWpADwf2wBgl9+YzTmucOgl8KgVFbnTa60ZPr2AXl1G+MY4Cz1zM4Ow3FL4oOIAwFAcBL6kCgBQagtA7BwKuvuBwP5Z7cCweg3+9hW7Lxof4FhvFSHkKmOBahVd-BOF4lRBwoi4BSk6Bg2sOAt5SIwSICgARnCz2AM4S+gU6AMLUQwxR3QVG5igHAbgcipGYLmFCVIyZkzaD8MAWC1hL7jSDnSOgpj5GJ3KnUM+DDcwWL0O4jou994ryoq3Ya2AO4TDwKfeRHhL6t3bumaJcAKjWFsCFA4H48BwCQTGEET1PBD0-IeEhZBKB8KobQJJnchh0BjJIueMjsCBIYQve4pimzrDbHlZ4EB3ZLCAA)
+You may also check out [the imperative example](https://tatomyr.github.io/purity/playground/#JYWwDg9gTgLgBAb2AO2DANHKBTZATbKTEAQwGtsB5ZAY20wDNpSYAVUbAXzgaghDgByAHTCA9CgIAPYQCsAzoIBQSsWLgAqLdp269+g4aPG9KmhGTz487DABK2XtnkALOAF448dwD44NmABJZBhCADcSABsAChwcfEJMGABKMwsrOABzWwAxPhAAGQgaKIBlGGgSbI84aIoAT2SPPwQlOC8oesQ29qxbAFcoZDgAKVLKADlhMBIoG2jI4rKKqCrsYWyg0JA67EbU9u4SmBo3aMIoJtbevphB4YROHqenpXNLa1tWCCKSyPLKtVPLt6pg8CQYCQmr5uu1Fn8AatssIAoFtiDMGNJiiYFAUJlgAx6tFwZDkqlXmpNCYabS6fSNGkPnAAAp2SgjACiAGFWKUagBtHoIQaRABcghcMBgYDFanhURcECsgkwyBIIGwYqEv0Vypggk46GForFAAMpTL5HKxCQwMANmgXP0AEbCcwgMQ4SDyMQOPDFSL1L3YAM0IMAWnDwDNao1WqE-sDXW5BUChuN7RFUHFFulYGtajtDoJMGdbo9IZ9YkhFRA9SgIZdwEikeLEYIDBQaGA6VjcHVmu1ggczdb9QzJpz5stBZtxcdZdd7v4VeVYisEDAkWAmSlvY3YGwNFxUX7g4TglKR5Pq0ik6zprzVvn9sX5ZXnu966T4eDODDSMwnkKMIAIc942HAA1UpuU5B9ECfWdC1tN9Sw-Stv19X8gxDQD6ijHdQIgMgXQgEiIKHIRuXI0jaIQ7Nc2Q18SydZdMOwata34BsxDAQY0HqSjLxZASYAnI0pyY-MUIXdD2NXLCawhHjGwUCwI3Eo95GE4cAA0I1YeptMnABdJkMhZTk7AAfRZABBABxTkagARgABgs+AEBACB+hCTBNnKCF6H8WxgtCTA4lwAgoG4TxuxgaJrjgU1WXZLleVKAV3NM4RRUzfxISgTISAAL0IeQaP8mBtXcwqcDoEJgpK8rKu1AVTMK+R7WQZBCG1BgohsQqLmgbV-M7FBQ0K0QNlyfJdX+FY1miQQrFmECwD4WRjwNZJjU4VI3nSeAXBIfBImwUpsCuk8anOaEWh6d4MlFGp1hoQZ4jYWZNmECJIn6bAXvSCAruERZMmS0Ujp6AIIuwaJoie2pGKOg4wrYH4lmWwEkfW4qtp2vbVTR2HySUV5XvgbaIF2k8brulYHtRlKacQHqUH6uKaiC2skeO9ocDuIY+gSKAzR6doAB4bGZuBgDwdwACJvwjeW9ugFW4DFMVTgu7J3AAEgQc7Luu269s4Hxpd6U22Q5Hk+WEUgwGRxi401I7mnF2KzRlrcYF7YZAeB1XTdhnXI5zDx3E8fmQpR-LY4AfiETWT1DQRdaEQ0fFNi9OBlsQg5DnwzWSJ4bhLzOYFtmuXX6aULF1-WdxoMgTbNi68CulrSoquYclsU58W4U2ub6wg4HTwQ8GAeQSBdK68Bz4d88AXg3ABBdkum5b5AG7gKXqdOuBTmPMgHB69JsBqHB5F9lLCVqABCB-hBIq47au+ALhqfqAB3OAnIoB8CgNEFWAAJVgrAWRFQhP0R+5gCDah1gAaj6PIHEiD5CY3aBcYQD9ICWDvp4B+dtCEbTuI-chzgcE0LtmWPgwCLjPB6CLe4WC5DyAsCjKmKgTrMkaoMeQwAwi3XqI5WwDgmowAHm1OYNQSDyHqLQWopJsAAFkUBIIAEwABZMAzGyGzHoL9ogmLvjLOArkmicLFp1FQ7QOYbVakPeQlAwDB3SDUFK7QXDYBILFa0sIbhCHsjQOg3jBDDjtNuYAxwQ5iDCPgd8y4wgAGYcFQHQepZAygbjcHYS4s+6M+bhQFvw0pzI3GD0qgAVVjp4d6mCzQbmKvUuYqcjxQBslY7uVlbIOWcpwAAZAM02VjOBSxqRkSIIUrAKI8cowBJA0A8FHi4aIdTFHyCaZETAuyPFeJ8ZYZIwgyy4GiBfTu18SE2ExhzRquB5GdL2TUBZoQlnvI8cILskRQgQNoX4IBcAAAiSdsFuIAjZCETQ-CaJ0cgfRBjMYWK+c4N5f09nCAhNECMdi4BjLGX0ORyzKqQ1wJkMscdPCYp+Tiv5V1kA0pcN-G4r1wbrDWUMNaExOScnBXALRlA7AuXBfZVg9lX5kwQNM-BtwuFCnCXAOa0QSBrI2SIuY4jJHSPsMeV5FK5gkhCsi1Fxi1hwAjLY8khUbhzRec1X5lU7bmUOHAW6NgwnCwGGLZ12L3GVTgOw0+zJzZ92uq64eWz8TKNUeolGT94aVKTsmmEyUp4821LiYGmAxpQAmgkLs-U8BHJjVVPyIQ6pRSNS6pl7U4CdQxj0XEXR-HnzKbDCp2LQjVN6BzBAxzKo2XMDVbUI65jVRCPFOAmr1nwAYFs6IooLlXOQDcwJdznAPOwIqu2CMqkZr8FmytM6YCtpuHbDmViahaIhC4d02AWw7PPdW+A6ghl2ScpyRVHMkW6PkIYgB2BgGQv7RB9YyAICAOTba2x7kkOaDgAANncih9DKHDH-rPoGk1tD51avgDqsREigwGtkcaytZrQgWuA0YuAVj8GHrTf2k9aN8OVqOb1HNPBhpcEpjcAI3wlqIlWgVTm76ap1vJZWuGnrjinHOGAjlvQj3ptRlm3jA1+ORBGl6sB41DNQFTq7ZwS9qip3ThcK9cAXheTgBYOgNRSAUGoHQfhQiMhTvkBFQjHH2bdpzBWxt06P2yeo2F+QPHuaJBM9AOdid+2Y2c0jSTkb+6VpHicFw+IhZKoDTFQgszegywXmEOAR8a7bTvkrVWKAmAqwLggQts9j6b0ANV7cBTaFpmbnbNM856AGxidex9AAK1IAeD+evDuk7Os0xc+I4Gq3AEuFWVvlfEYrZWat60wA1pW5rdtZa1Za1x6LVLWW0r8Bhklx8qMhAQcGpR0RTbnee9gllbLuAoDgIY9l5pFuneO6t-okQzt7YI67O0OzfbxH9jLHcPgZancnvlGwUBIYQAJMgIHy2S5I8rotsHG2xDrZ6CfRzfAIDeFqKjeHJWeibcq-VtW5EYBHZrlYeoV0VvtFq768J5hFhFrgCvYGABuEH1cysdJ59gFbUySaMytieaAKMZftEnpW-zGumdk-EbbKWShfI1ViOz1IQA)
 (or alternatively [the declarative one](https://tatomyr.github.io/purity/playground/#JYWwDg9gTgLgBAb2AO2DANHKBTZATbKAXzgDMoIQ4ByAOloHoUCAPWgKwGdqAoHgYwjJO8BCAgBXZBiyFcBYnAC8cFGgAUASh5weDBnABUxk6bPmLlq9Zvm+g4fBABDANbYAgpwCeyfsrh1HBx8Qk1lAD5EHTgHEVjnABtEzgCEIhicGAkoZEDgPEwARwlCb3ClKIQYuFiheP4kxID1PGcYZwqqmtqE5M4AbQKAXTT6Wkb+obxhzBF2iU4ALhoweRQAc2pMQgooFakCUhRsPAze3pKyrR6L2hgAC1x1VvbOyL6U6dGVBHns5Y0TgSfj8bCcbiYNodIjaC53RowfgPF67aBdT6DEZpf6LFbUUjOYCJHLYbZwNHEOHw2q0Y7IJreIJyUJQam1c69YCkQIAQkmXxG4WqNIFNwuGR6WRyeRF8PGAqxM0wt1kpGwSIeK1eHQxctFTR1nQA3LoabVgvJCFpTarORyYhlJfojLY3e6PZ7DDoBPV4ItPD4-AEXO4vL5+MyQgptL7HLEnvxXAAlcGQYTYAI4VKVaK1bl87O0CCuYU9RIailQKABZDYADucAAotXoOoAEQACQAKt2AApwXGpQQEFbtuAAalknFoQ-ZVagtGz6c4mZU2Z6u1nHQBWfB24WnB6jwojd2jsyGpl044nCEN0lcX9UGaKgABg8YDAwMt9M4wMAtAbGgDwSAARhMlAMDgkCcAwO6UN4UAMGAORoN4b72H6qhxGkZqDiCYIQvigAK1IA8H-bDEhLEqS+KALwbgDVe5RtRrPgmz4oA2MSUY+2EUBA8AqFoHxyk+iBDlCbw7K2UCYDg6qaiQKgBuGfjqDkiSYEJubyciakvpo9xPMg6jItgSappwK7YJomj6LQ2AsGZEgwNg4p1PGeDcjyKjQs4AD8B5QBszgAF6EJwAD6ghSPAAC0gSJBAkwAMowNAzgbNggXBWFUCRdF0hwH5flwAADNSBatF54SJSlaVQBlWXzEFoXhVFkiFT5bwBc1OVtQVMB8BaV65LIrKYRcAA8nkAG6qHgSjtnxMDthEqqTWAODzYtzWcKtqq1AAJEgcQDEOwwkMdvk9R0LW5flHXwMVNB+dQRBXV5RVwG+cCTWBETqBOH2kKQsKTQw-0-fib3rShOBrTS03AHNBSLZSq2TcAUQHXAx1DsoSgqASRIkjg1BwAAZBTgSUgFIDgpwjVFSVlKaPavTg1jSMzQj8J-c5aV5DjSxLPwiTAEmSjHXJGrIuztS8zSqY6Q8sNgQLQiK79DCzbzmGSuIMVBBA-HaEAA))
 and [the complex useAsync example](./src/examples/async-counter/index.js) for advanced cases.
 
 <!-- TODO:
+https://tatomyr.github.io/purity/playground/#JYWwDg9gTgLgBAb2AO2DANHKBTZATbKTAM2hAEMYAVUbAXzmKghDgHIA6DgehQIA8OAKwDObAFDju3OACp5CxUuUrVa9RuWSAxhGQj4FANbYA8sm3Y4AXjgAKAJQ2AfInFw4u-fG3kANn4iNnDI2ADucADK2DCO7lgxAK5QyPbAeJgAjomEAJ5O1q4I8R7AxPYAhL4BIhwAFuQidukOTsUeHZ7+gRzkeHjNeA4A3CUdIjE0INgQibHZeQ5jdPErK+JeBnATMABK2EzYInXBzcgwBa47AJLnhABu-nY4OPiEmCgXOnpbAOYxADFmCAADIQaqRGDQcj-U4mfIuNwePwxOB4SjkODxGBQXJIjromCY2wAKUipgAchwwOQoBM7H5wf5IdD-hx-jBrjBsCA7PDWqsujBtCc7IQoG0Vh4cDBkqlCZiAD6KxBrb7ebaTCBgiFQqAwqy2PnYXKYBWXfGM3Ws7AcG7c3nwzBkyl2nEoX5lXJ2c1LdbSOSaIPBkOh2TqrbJPzBAAGdRgMDAIgAXNJyGBgOy0HVEgAjDi6EDcHCQETcIlQkC5KDcMDJNC5GMR+AIECzc6YDmQyjYTA7bvczAvXAEKAMWwoNB2dpwLjswHAnXMvUGuxRhzobG0W7cqCPPzJuAABk3HhEGeQoSgh+I-gmp7g4ugh8Sb2IKGwGXEdCWGx+8D0SxgmMMwLGwOI-w1EVsG0Ix9nPH5DQSIJCnxMpKhwWoICMNoxhReBxWCUIIgAUSgZgoDsAAiAAJKgqAABW2CtEiCXQCEPKi4AAamQt1KFYpZOnFDhMMgfQkMwsYRIMASUL42TZREMYYDqZgInFVZ4hlOU+NEPQ4nWTZ4C7IkoF+cgAC9CHkxpcgsewLRnfsK3AxxEWnc8UCvQ8cRyTAn2vOBXwId9QgyNEymIQ8jx-IS4BxPEZw8YzEFk8yrJsgB9XRXxgcc4HIMJyDQRgYhFNcoD8BwOFU3A7Gg2D4PEiZ4pS-9IuIcpbHSizrLpHL23gABaOBTJ7Rx+Iy-qREGvKxlS7RkleGAAGE6hgowABEe2CHbuQ4ZAIDCOJOlSmBtzuPd-GCcbuUmvxGjWjbYP2qwADJ3vsJbyNwZ7NreuBRru8Casegx1oBns2s1GABzci1PLMvrstyjs4HB-7Xp7Q8fpWyHscHbYLx8xg717TriEwC7ph3B5-DisYdiobUmT8Fl9X+Sq-EwBBesyga0YwDGnoJ7acc8Za-rFt6f0FXxhTqMVyNwzoXIm9zUM8knCBvcmAvI59H3IgB+DhphEEQDTgE2TeNscBQ8NVIK2ZgIHgI0nPiQDwKjTsYm7aabPin27DYHBDmONhME1oomZifZI6VgBmI80-iuX2o1PnkYF2ahb7HWiHt6AzSi6nLt3fdMExmWewKkHTs8DqaewEjHqTT89p7Q7jvc0ba5e8XuUkaUkhSBI3igJtOgAHjwYB7jgdJrCot2YCo5wxg8WewBwZe8FX9KRE37eOgAEgQQKbfYQBeDcAar22DgQ8vMvQgb7YQBsYifw82EABWpADwf2wBgl9+YzTmucOgl8KgVFbnTa60ZPr2AXl1G+MY4Cz1zM4Ow3FL4oOIAwFAcBL6kCgBQagtA7BwKuvuBwP5Z7cCweg3+9hW7Lxof4FhvFSHkKmOBahVd-BOF4lRBwoi4BSk6Bg2sOAt5SIwSICgARnCz2AM4S+gU6AMLUQwxR3QVG5igHAbgcipGYLmFCVIyZkzaD8MAWC1hL7jSDnSOgpj5GJ3KnUM+DDcwWL0O4jou994ryoq3Ya2AO4TDwKfeRHhL6t3bumaJcAKjWFsCFA4H48BwCQTGEET1PBD0-IeEhZBKB8KobQJJnchh0BjJIueMjsCBIYQve4pimzrDbHlZ4EB3ZLCAA
 https://tatomyr.github.io/purity/playground/#JYWwDg9gTgLgBAb2AO2DANHKBTZATbKAXzgDMoIQ4ByAOloHoUCAPWgKwGdqAoHgYwjJO8BCAgBXZBjgBzbDADKMAIYxsmTguVqNWQrgLE4AXjgo0ACgQ84duCJVRZKgF6FOAfUFSYALhoAWmpMW3sfaQCABnQwuxxITgCAbQBdWPsHbAAbbH51PAAlbEgAqQJSFGw8DPtOMBRkQgDSFWytWKIASj4GBjgAKiHhkdGx8YnJqemxvkFheBAVAGtsAHlkfmxTOEsu0wA+RDi4eZFTtvadhCI+TJwYCShkXeAauABHCUIAT32TI42TKZYCkXYAQn4l04yTeqX2QOBSKh2XasLwqR2MCg3xOSLsfU+3ygPz2cDx+K0MAAKqBsJIYJYvr8evi4LdMrdbgIhOchFsdktVhstntev0ZpKpdKZUM5rz4GswDBgEIdtZkCoQHo8MBOCoAEa5PDdQ76fCEAAGJwAPBBlaqXgA3NrfEwAIgAJAhNdqiO64N7fdsTKG5NpVOo9rQtLl8tVipA4AAyZM0WN5ArUEje3X6o3VFNp6h5w3G7MHCl2INa7Ac+w2hj2lVCSvWnkLU4ACzyy2K9V5If0nDNiLsoIhOE4tAgywRVbguXghCgOyaAHc4ABRKAUKCWd0ACWp1IACg5IxIR4ICAEAwBqYcxy+cVn4le0KeQYRDqcLj+OI8I5mFOz5qFeC4wF2FCbiuJz1vEChPC8oFcEIYrcmc8DyEoqhQMB+iQAAcrWZqkAo-BdpYlpdjAMBgEkfQqA0tCyGgXYSAatCCCADAJBAnAMJGlA-FADDevxJF+pab52LQUG4JYlG9v235aLJcDyT2yCWNYjjOG4HjeJI0imgCWS4boun-Ecel4S47j4cZvjdF0GncWolHWWaVI6FGZLmXZTgOUZET+EE2Zue5lSaqipIBUcvmRtg3mBQg9SNM0ZBtFork9B25z8ZwACqUDZDsNF0QxfhMSxbFQZx3GUAwV4eEJagiWJRUAPycNAMAmBIYB4LoeDJmAhCeGAKjyCYACMURRO2WFwIoOSZuqNnHJk-IpUVpXZJgCVkBRVH7WVGmZFpinKfwfbYAOP6XfYHkwF5lgrltbSEIyH7apw+ryG5C7XTpRWjgumQrRm8ZFCUEA7D1tDJFEqTdbQwaQ3UEZWcd1hFZoDTIE0UABNi3yaOtsOJhArlY4hjzPFkcYFDTC7dCDCk6ThOj4Rp+X3EhTM4BaUDWmyNow-A9NwH4fiUSoyCzd61j2QoAQIC62TfAEUsJvDRBmYCMuZEluNbXpVOs-DhOZaTcDk3WwNsmyPN4Zwlh63DkDPUihsLkcMvem7VldJ+8OcOjSxgJYSotsgXQIcCjZS5WmTWphCpwAAgmAYCbRDJwPMh5pGOL+I2rqTrmHgHoUBAMDumnLvVgga0s3s3It3YNpgDgNcevpnBNyb9jBzjUZhxlxOEHA3U0IA2MTULLNCAArUgDwf9mgYICHk9gQZjleGFJC85wMuNn32DNy35-QXADCVufBoSHRaqj3Ycv8NkwB3SYKtbWbfyCBj4W2ASZcKYU4CPjmq5JObJr7dzsAAYW-ndc+DBn6v2QAgiWl8DiAD4NwAd7vb13ilMOx84AoJ-ssTgF8cCPwlgwKuCCM58HEL4SwucwA9CAA
 https://tatomyr.github.io/purity/playground/#JYWwDg9gTgLgBAb2AO2DANHKBTZATbKAXzgDMoIQ4ByAOloHoUCAPWgKwGdqAoHgYwjJO8BCAgBXZBjgBzbDADKMAIYxsmTguVqNWQrgLE4AXjgo0ACgQ84duCJVRZKgF6FOAfUFSYALhoAWmpMW3tOMBRkQgDSFQAbLXQeIgBKPgYGOAAqXLz8gsKi4pLSssK+QWF4EBUAa2wAeWR+bFM4S1TTAD5EMLsqkTh+BMT2hCI+e30YCShkDuA8TABHCUIATy6TXoQ4fvtgUg6AQhH4xIBtJYBdLptpx+HRzmu8G-aYKHWDp60YAAqoGwkhgljWm3ST0m00mkwEQiGQla7VqDWarU6GSy5VxePxBNyfAR1WGAAtsPw6gAlbARRFtMw4Tg9PrTI6nZm0CB1e6-ezxBRwQhQdrRADucAAolAKFBLAAiAASAIBAAUHKpZizBAQAgq4ABqfScWiObVQp7C2W0ZmQYSMk38uwis1aiQspl0t1qD3OuAwMkUSUig4w+yDCCC2jxCCySwAViTyYTXQOOFm8xNHE4Qix8NIUn4MGAQjgYHiKg2ikk+Esc3ifIGiPgKgkeFLYuwkoAgu3S-WoI2ANxhNsdiC0CtVzqjkiVFtwBvtAAGZJgMDAnD8mRUkVosjQZIkACNaIIQAwcJBOAxaXgIPx4hsr9gH0+NoEn8AVzxMsNF2XMw1w3LcdwYPdgAPI9T3PShXxvBgtUoDYoAYMBxV-Ekhh7MAwHaTpWRsSNo1jeMAEZKKo9IwmRbBB3iTAVE4DYWg6bZdgOEjsBjONLAAZkEoTBLTA5-3+IEQBBCQwUInY4H-AFGgAEUaAJxTJDYAIkeI8GQah4DQOATzaFiWgAfn5f4dHUSw5N6awIiiGIA2+bA0ktOx-y6ewpgjREox4sjLAAFjC8KQs81ytIeR5BlERxnDcDxvFrGASDMFRxRUIzSAUfgyQY1JaEDXBLAKykaTpe0tCi5tSQ7UhjjMRKXHcKAvB8aQ4ECDpDVjc5lGgFR5FtN9H2fTxWuSjrUt8OAAB8FrgAAGOrzGOSxGuOXoVsW5aBoSIaoBGnicHfSbpvazq0tMEwzCkAhSBQN8mytadq1rPBLGoddN23TIH3FZBYxUPAzRUcBBXiYAzwvBhwH4hhOEhitsECfjTUR6h1vDaZDviY7TrGi6Nim1Qkuuubupaim2pSrqYCs7QtXo+yOgQK6GbSzBto8-Yw2eGACssEU3r+FndDsjiOa52bGYCagWGoDzBee5BRhi-luN4+MADYDcNvXUlHJ5xIUSTpNkmX-Ws1npdZRzImQaIoFiBItH5-lvP2J4deCgB2IPg4DqLwzSPz-b4gAmWO49jy0MzmBYcHwQhf2mAAeDsADdzDwEwFQoCAYAVbp+UzsAcHzwvEs4Mv-QAEj2eQlHt4qnJdwg4HMmhAGxiag4EVwAFakAeD+VbgZvW5s+iO7pmabt8EgdA6jop8l2ziu2uBdrgAAyPeaENFX17bqWt6OUgI6eTP0Jwcus4YXOH7gX94XEXxLFwsB0iAA
 -->

src/once.ts

@@ -1,8 +1,8 @@
 export const makeOnce = () => {
-  let latestCalledKey: string | number | undefined
+  let lastCalledKey: string | number | undefined
   return (key: string | number, query: () => void | Promise<void>) => {
-    if (latestCalledKey !== key) {
-      latestCalledKey = key
+    if (lastCalledKey !== key) {
+      lastCalledKey = key
       setTimeout(query)
     }
   }

src/playground/components/editor.ts

@@ -1,12 +1,14 @@
-import {render} from "../../index.js"
-import {getState, setState, once} from "../index.js"
+import {makeOnce, render} from "../../index.js"
+import {getState, setState} from "../index.js"
 import {configureMonacoEditor} from "../services/monaco-editor-config.js"
 import {createUpdate, defaultCode} from "../services/user-code.js"
 import {editorStyle} from "./editor-style.js"
 
 export const getEditor = (): HTMLElement =>
   document.getElementById("editor") as HTMLElement
 
+export const once = makeOnce()
+
 export const editor = (): string => {
   once("configure-editor", () => {
     configureMonacoEditor({

src/playground/index.ts

@@ -1,4 +1,4 @@
-import {init, makeOnce} from "../index.js"
+import {init} from "../index.js"
 import {playground} from "./components/playground.js"
 
 // Suppressing the main output (iframe output remains):
@@ -15,6 +15,4 @@ export const {mount, getState, setState, rerender} = init<PlaygroundState>({
   placeOverDisplay: "none",
 })
 
-export const once = makeOnce()
-
 mount(playground)