[incubator-annotator] 01/01: Improve hot module reloading in demo

[ge...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

gerben pushed a commit to branch demo-hmr
in repository https://gitbox.apache.org/repos/asf/incubator-annotator.git

commit 12248024327917459d6e56daa36d72ed76f0e04f
Author: Gerben <ge...@treora.com>
AuthorDate: Sun May 16 00:31:54 2021 +0200

    Improve hot module reloading in demo
    
    So that old highlights still get cleaned up.
---
 web/index.js | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/web/index.js b/web/index.js
index 80894b1..ca2be03 100644
--- a/web/index.js
+++ b/web/index.js
@@ -83,11 +83,13 @@ const EXAMPLE_SELECTORS = [
   },
 ];
 
-const cleanupFunctions = [];
+let moduleState = {
+  cleanupFunctions: [],
+};
 
 function cleanup() {
   let removeHighlight;
-  while ((removeHighlight = cleanupFunctions.shift())) {
+  while ((removeHighlight = moduleState.cleanupFunctions.shift())) {
     removeHighlight();
   }
   target.normalize();
@@ -121,7 +123,7 @@ async function anchor(selector) {
 
   for (const range of ranges) {
     const removeHighlight = highlightRange(range);
-    cleanupFunctions.push(removeHighlight);
+    moduleState.cleanupFunctions.push(removeHighlight);
   }
 
   info.innerText += JSON.stringify(selector, null, 2) + '\n\n';
@@ -152,14 +154,26 @@ function onSelectorExampleClick(event) {
   event.preventDefault();
 }
 
-document.addEventListener('selectionchange', onSelectionChange);
-form.addEventListener('change', onSelectionChange);
-document.addEventListener('click', onSelectorExampleClick);
+function addEventListeners() {
+  document.addEventListener('selectionchange', onSelectionChange);
+  form.addEventListener('change', onSelectionChange);
+  document.addEventListener('click', onSelectorExampleClick);
+}
+addEventListeners();
+
+function removeEventListeners() {
+  document.removeEventListener('selectionchange', onSelectionChange);
+  form.removeEventListener('change', onSelectionChange);
+  document.removeEventListener('click', onSelectorExampleClick);
+}
 
 if (module.hot) {
   module.hot.accept();
-  module.hot.dispose(() => {
-    document.removeEventListener('selectionchange', onSelectionChange);
-    document.removeEventListener('click', onSelectorExampleClick);
+  module.hot.dispose((data) => {
+    removeEventListeners();
+    data.state = moduleState;
   });
+  if (module.hot.data?.state) {
+    moduleState = module.hot.data.state;
+  }
 }