substantial web repl improvements

added proper cache handling, and a nice tap-to-copy feature for actual use

diff --git a/src/Makefile b/src/Makefile
index 8042cca21c5bef28fd63ebc112b3d51ada9346be..bb8ed457b2ccdde0215115a55f1d2752a18d0ec9 100644 (file)
--- a/src/Makefile
+++ b/src/Makefile
@@ -43,11 +43,12 @@ $(WEB_OBJS): $(WEB_BUILD)/%.o:%.c Makefile
        emcc -c $< -MMD -o $@ $(CFLAGS)
 
 .PHONY: web
-web: $(WEB_OBJS)
+web: $(WEB_OBJS) $(WEB_BUILD)/../sw.js $(WEB_BUILD)/../setup.js $(WEB_BUILD)/../shell.html $(WEB_BUILD)/../manifest.json
        emcc $(WEB_OBJS) --shell-file $(WEB_SHELL) -o $(WEB_BUILD)/klrepl.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']" --preload-file ../demos.kl@demos.kl
        mkdir -p $(WEB_BUILD)/../static/repl
        cp $(WEB_BUILD)/../kl.png $(WEB_BUILD)/../static/repl
        cp $(WEB_BUILD)/../manifest.json $(WEB_BUILD)/../static/repl
+       cp $(WEB_BUILD)/../setup.js $(WEB_BUILD)/../static/repl
        cp $(WEB_BUILD)/../sw.js $(WEB_BUILD)/../static/repl
        cp $(WEB_BUILD)/klrepl.data $(WEB_BUILD)/../static/repl
        cp $(WEB_BUILD)/klrepl.js $(WEB_BUILD)/../static/repl
@@ -56,6 +57,8 @@ web: $(WEB_OBJS)
        cp $(DOC)/index.html $(WEB_BUILD)/../static
        cp $(DOC)/style.css $(WEB_BUILD)/../static
        cp $(DOC)/builtins.html $(WEB_BUILD)/../static
+       uuidgen > $(WEB_BUILD)/../static/repl/versionHash
+       cp $(WEB_BUILD)/../static/repl/versionHash $(WEB_BUILD)/../static/repl/cacheHash
 
 .PHONY: test
 test: $(TEST_OBJS)

diff --git a/web/setup.js b/web/setup.js
new file mode 100644 (file)
index 0000000..bb36d7a
--- /dev/null
+++ b/web/setup.js
@@ -0,0 +1,67 @@
+var Module = {
+               print: (function() {
+                               var element = document.getElementById('replout');
+                               if (element) element.textContent = 'loading...';
+                               return (...args) => {
+                                               var text = args.join(' ');
+                                               console.log(text);
+                                               if (element) {
+                                                               let printelt = document.createElement('div');
+                                                               printelt.textContent += text + "\n";
+                                                               element.appendChild(printelt);
+                                               }
+                               };
+               })(),
+};
+document.getElementById("replform").addEventListener("submit", e => {
+               e.preventDefault();
+               let outzone = document.getElementById("replout");
+               let inelt = document.createElement('div');
+               let instr = e.target[0].value
+               inelt.textContent += "<- " + instr + "\n";
+               inelt.addEventListener("click", (eclick) => {
+                               let replin = document.getElementById('replin');
+                               //let cursor = replin.selectionStart;
+                               let intxt = replin.value;
+                               let start = replin.selectionStart;
+                               let end = replin.selectionEnd;
+                               let newstart = start + instr.length;
+                               let pre = intxt.substring(0, start);
+                               let post = intxt.substring(end);
+                               let newintxt = pre + instr + post;
+                               replin.value = newintxt;
+                               replin.focus();
+                               console.log(newstart);
+                               replin.setSelectionRange(newstart, newstart);
+               });
+               outzone.appendChild(inelt);
+               let outelt = document.createElement('div');
+               let output = Module.ccall("ems_eval", 'string', ['string'], [instr])
+               outelt.textContent += " -> " + output + "\n"
+               outzone.appendChild(outelt);
+               document.getElementById('replin').value = ""
+});
+
+if('serviceWorker' in navigator) {
+               console.log('registering');
+               navigator.serviceWorker.register('./sw.js')
+                               .then(() => {
+                                               console.log('sw reg');
+                                               return fetch('./versionHash');
+                               }).then((res) => res.text()).then((webHash) => {
+                                               fetch('./cacheHash').then((cres) => cres.text()).then((cacheHash) => {
+                                                               console.log(cacheHash, webHash);
+                                                               if(cacheHash == webHash) {
+                                                                               console.log("hashes match, cache up to date");
+                                                               }
+                                                               else {
+                                                                               navigator.serviceWorker.ready.then((reg) => {
+                                                                                               reg.active.postMessage('updatecache');
+                                                                               });
+                                                               }
+                                               });
+                               });
+}
+else {
+               console.log('no sw in nav');
+}

diff --git a/web/shell.html b/web/shell.html
index 45110793ad7d3d3dbbc6be22b6d7e66086afe2db..54c8411a2e745ae216059e11351b3e43574c8f7d 100644 (file)
--- a/web/shell.html
+++ b/web/shell.html
@@ -8,6 +8,9 @@
                <link rel="icon" href="kl.png" />
     <title>klrepl</title>
                <style>
+                       body {
+                         background-color: #ddffee;
+                       }
                        .console {
                                        white-space: pre-wrap;
                        }
@@ -21,45 +24,7 @@
                        </form>
                </div>
     <div class="console" id="output" rows="8"></div>
-               <script type='text/javascript'>
-                       var Module = {
-                                       print: (function() {
-                                                       var element = document.getElementById('replout');
-                                                       if (element) element.textContent = 'loading...';
-                                                       return (...args) => {
-                                                                       var text = args.join(' ');
-                                                                       console.log(text);
-                                                                       if (element) {
-                                                                                       let printelt = document.createElement('div');
-                                                                                       printelt.textContent += text + "\n";
-                                                                                       element.appendChild(printelt);
-                                                                       }
-                                                       };
-                                       })(),
-                       };
-                       document.getElementById("replform").addEventListener("submit", e => {
-                                       e.preventDefault();
-                                       let outzone = document.getElementById("replout");
-                                       let inelt = document.createElement('div');
-                                       let input = e.target[0].value
-                                       inelt.textContent += "<- " + input + "\n"
-                                       outzone.appendChild(inelt);
-                                       let outelt = document.createElement('div');
-                                       let output = Module.ccall("ems_eval", 'string', ['string'], [input])
-                                       outelt.textContent += " -> " + output + "\n"
-                                       outzone.appendChild(outelt);
-                                       document.getElementById('replin').value = ""
-                       });
-
-                       if('serviceWorker' in navigator) {
-                                       console.log('registering');
-                                       navigator.serviceWorker.register('./sw.js')
-                                                       .then(() => { console.log('sw reg'); });
-                       }
-                       else {
-                                       console.log('no sw in nav');
-                       }
-                       </script>
+               <script type='text/javascript' src="setup.js"></script>
                {{{ SCRIPT }}}
        </body>
 </html>

diff --git a/web/sw.js b/web/sw.js
index 932b15c161e34b7ecb5bd9d3b05c8768a3e9cb70..f2fa657bc0357a53f46514ee771d829a0301778f 100644 (file)
--- a/web/sw.js
+++ b/web/sw.js
@@ -4,15 +4,38 @@ self.addEventListener('install', (event) => {
                                caches.open('klrepl').then((cache) => cache.addAll([
                                                './',
                                                './index.html',
+                                               './setup.js',
                                                './kl.png',
                                                './klrepl.js',
                                                './klrepl.wasm',
                                                './klrepl.data',
+                                               './cacheHash',
                                ]))
                )});
 
 self.addEventListener('fetch', (event) => {
                event.respondWith(
-                               caches.match(event.request).then((response) => response || fetch(event.request))
+                               caches.match(event.request).then(
+                                               (response) => response || fetch(event.request))
                );
 });
+
+self.addEventListener('message', (event) => {
+               console.log(event.data);
+               if(event.data = 'updatecache') {
+                               caches.delete('klrepl').then(() => {
+                                               caches.open("klrepl").then((cache) => {
+                                                               cache.addAll([
+                                                                               './',
+                                                                               './index.html',
+                                                                               './setup.js',
+                                                                               './kl.png',
+                                                                               './klrepl.js',
+                                                                               './klrepl.wasm',
+                                                                               './klrepl.data',
+                                                                               './cacheHash',
+                                                               ]);
+                                               });
+                               });
+               }
+});