From 777e7464a6bcb7a6fe413fa25fe6c42802fb1a07 Mon Sep 17 00:00:00 2001
From: Elijah Cohen <eli@eli173.com>
Date: Mon, 6 Jan 2025 19:09:35 -0600
Subject: [PATCH] substantial web repl improvements

added proper cache handling, and a nice tap-to-copy feature for actual use
---
 src/Makefile   |  5 +++-
 web/setup.js   | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++
 web/shell.html | 43 +++-----------------------------
 web/sw.js      | 25 ++++++++++++++++++-
 4 files changed, 99 insertions(+), 41 deletions(-)
 create mode 100644 web/setup.js

diff --git a/src/Makefile b/src/Makefile
index 8042cca..bb8ed45 100644
--- 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
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 4511079..54c8411 100644
--- 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 932b15c..f2fa657 100644
--- 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',
+								]);
+						});
+				});
+		}
+});
-- 
2.39.2