[incubator-annotator] branch demo-hmr created (now 1224802)

[ge...@apache.org]

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

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


      at 1224802  Improve hot module reloading in demo

This branch includes the following new commits:

     new 1224802  Improve hot module reloading in demo

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

[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;
+  }
 }