Fix leaflet

web-frontend/src/lib/Map.svelte

@@ -4,6 +4,7 @@
 
 	let mapElement;
 
+	export let onMapClick = () => {};
 	export let map;
 	// export const leaflet;
 
@@ -12,6 +13,7 @@
 			const leaflet = await import('leaflet');
 
 			map = leaflet.map(mapElement).setView([51.505, -0.09], 13);
+			map.on('click', onMapClick);
 
 			leaflet
 				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

web-frontend/src/lib/common.js

@@ -19,6 +19,7 @@ export async function getWasm() {
 			console.error('Error loading wasm module', e);
 			wasmError = e;
 			wasmStatus = WasmStatus.Errored;
+			throw e;
 		});
 
 	return {

web-frontend/src/routes/app-lite/+page.svelte

@@ -0,0 +1 @@
+<h1 class="font-bold text-2xl pb-4">App Lite</h1>

web-frontend/src/routes/app/+page.svelte

@@ -4,9 +4,10 @@
 	import { onMount, onDestroy } from 'svelte';
 	import AddressInput from '$lib/AddressInput.svelte';
 	import { browser } from '$app/environment';
-	let leaflet;
+	// import tick from 'svelte';
-	// import leaflet from 'leaflet';
+	import Error from './Error.svelte';
 
+	let leaflet;
 	import Map from '$lib/Map.svelte';
 
 	let map;
@@ -19,26 +20,36 @@
 		call: undefined
 	};
 
-	onMount(async () => {
+	const onMapClick = (e) => {
-		leaflet = await import('leaflet');
+		let popup = leaflet.popup();
-		wasm = await getWasm();
 
-		if (browser) {
+		try {
-			let popup = leaflet.popup();
+			latlng = e.latlng;
-			map.on('click', (e) => {
+			addr = wasm.call.address_from_lat_lon(latlng.lat, latlng.lng);
-				try {
+			popup.setLatLng(e.latlng).setContent(`${addr}`).openOn(map);
-					// TODO: Leaflet allows sending coordinates out of the standard range
+		} catch (err) {
-					latlng = e.latlng;
+			console.error(err);
-					addr = wasm.call.address_from_lat_lon(latlng.lat, latlng.lng);
+			addr = '';
-					popup.setLatLng(e.latlng).setContent(`${addr}`).openOn(map);
+			popup.setLatLng(e.latlng).setContent(`You clicked at ${e.latlng}`).openOn(map);
-				} catch (err) {
-					console.error(err);
-					addr = '';
-					popup.setLatLng(e.latlng).setContent(`You clicked at ${e.latlng}`).openOn(map);
-				}
-			});
 		}
-	});
+	};
+
+	let init = async () => {
+		await getWasm()
+			.then((w) => (wasm = w))
+			.then(async () => {
+				leaflet = await import('leaflet');
+			})
+			.catch((err) => {
+				console.log('Erroring');
+				console.error(err);
+				throw err;
+			});
+	};
+
+	// onMount(async () => {
+	// leaflet = await import('leaflet');
+	// });
 
 	onDestroy(async () => {
 		if (map) {
@@ -66,28 +77,25 @@
 
 <h1 class="font-bold text-2xl pb-4">App</h1>
 
+<noscript>
+	<style>
+		.js-only {
+			display: none;
+		}
+	</style>
+	<Error>Your javascript is disabled</Error>
+</noscript>
+
 <p>{outputValue}</p>
-{#if wasm.status == WasmStatus.Loaded || wasm.status == WasmStatus.NotLoaded}
+
+{#await init()}
+	<p class="text-lg js-only">Loading WebAssembly module...</p>
+{:then}
 	<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
 
 	<AddressInput bind:value={addr} on:input={input} />
 
-	<Map bind:map />
+	<Map bind:map {onMapClick} />
-{:else if wasm.status == WasmStatus.Errored}
+{:catch message}
-	<div class="flex text-xl">
+	<Error {message}>Could not start core module</Error>
-		<div class="py-1">
+{/await}
-			<svg
-				class="fill-current h-6 w-6 text-teal-500 mr-4"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				><path
-					d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
-				/></svg
-			>
-		</div>
-		<div>
-			<p class="font-bold">Could not start core module</p>
-			<p class="text-sm">Error: {wasm.error}.</p>
-		</div>
-	</div>
-{/if}

web-frontend/src/routes/app/Error.svelte

@@ -0,0 +1,29 @@
+<script>
+	export let message;
+</script>
+
+<div class="flex text-xl mt-4 mb-6">
+	<div class="py-1">
+		<svg
+			class="fill-current h-6 w-6 text-teal-500 mr-4"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 20 20"
+			><path
+				d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
+			/></svg
+		>
+	</div>
+	<div>
+		<p class="font-bold"><slot /></p>
+
+		{#if message}
+			<p class="text-sm">Message: {message}.</p>
+		{/if}
+
+		<p class="text-base pt-4">
+			You can still use xpin, but you have to go to the <a href="app-lite" class="text-blue-500"
+				>lite</a
+			> version of the app
+		</p>
+	</div>
+</div>

wordlist/03-exclude.csv

@@ -437,6 +437,7 @@ BRAVO
 BRAY
 BRAZIL
 BRAZILIAN
+BREAST
 BREMEN
 BRENT
 BRETON