new web client

wxbox-web/.prettierrc

@@ -4,5 +4,12 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

wxbox-web/README.md

@@ -8,10 +8,10 @@ If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm create svelte@latest
+npx sv create
 
 # create a new project in my-app
-npm create svelte@latest my-app
+npx sv create my-app
 ```
 
 ## Developing
@@ -35,4 +35,4 @@ npm run build
 
 You can preview the production build with `npm run preview`.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

wxbox-web/eslint.config.js

@@ -1,12 +1,12 @@
-import eslint from '@eslint/js';
 import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
 import svelte from 'eslint-plugin-svelte';
 import globals from 'globals';
-import tseslint from 'typescript-eslint';
+import ts from 'typescript-eslint';
 
-export default tseslint.config(
+export default ts.config(
-	eslint.configs.recommended,
+	js.configs.recommended,
-	...tseslint.configs.recommended,
+	...ts.configs.recommended,
 	...svelte.configs['flat/recommended'],
 	prettier,
 	...svelte.configs['flat/prettier'],
@@ -20,9 +20,10 @@ export default tseslint.config(
 	},
 	{
 		files: ['**/*.svelte'],
+
 		languageOptions: {
 			parserOptions: {
-				parser: tseslint.parser
+				parser: ts.parser
 			}
 		}
 	},

wxbox-web/package.json

@@ -1,35 +1,35 @@
 {
 	"name": "wxbox-web",
 	"version": "0.0.1",
-	"private": true,
+	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
+		"lint": "eslint . && prettier --check .",
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/eslint": "^9.6.0",
-		"@types/leaflet": "^1.9.12",
+		"@types/leaflet": "^1.9.14",
-		"eslint": "^9.0.0",
+		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
-		"leaflet": "^1.9.4",
+		"prettier": "^3.3.2",
-		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-svelte": "^3.1.2",
+		"svelte": "^5.0.0",
-		"svelte": "^4.2.7",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module",
+	"dependencies": {
-	"packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"
+		"leaflet": "^1.9.4"
+	}
 }

wxbox-web/src/app.d.ts

@@ -1,4 +1,4 @@
-// See https://kit.svelte.dev/docs/types#app
+// See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
 	namespace App {

wxbox-web/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

wxbox-web/src/routes/+layout.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import 'leaflet/dist/leaflet.css';
+
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        children: Snippet
+    }
+    let { children }: Props = $props();
+</script>
+
+{@render children()}

wxbox-web/src/routes/+page.svelte

@@ -1,56 +1,49 @@
 <script lang="ts">
-    import './global.css';
+    import type {ActionReturn} from "svelte/action";
-    import L from 'leaflet';
+    import type {TileLayer, Map as LeafletMap} from "leaflet";
-    import type { Map as LeafletMap } from 'leaflet';
 
-    let map: LeafletMap | null = null;
+    let mapEl: HTMLElement;
+    let map: LeafletMap;
+    let L;
 
-    function createMap(container: string | HTMLElement): LeafletMap {
+    async function mapAction(node: HTMLElement): ActionReturn {
-        let m = L.map(container, { preferCanvas: true }).setView([39.8923, -98.5795], 5);
+        L = await import('leaflet');
-        L.tileLayer(
+
-            'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+        map = L.map(mapEl, {
+            center: [51.505, -0.09],
+            zoom: 13
+        });
+
+        L.control.layers(
             {
-                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
+                "OpenStreetMap": L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "&copy;" })
-                maxZoom: 19
+            },
-            }
-        ).addTo(m);
-        L.tileLayer(
-            'http://localhost:8080/mrms_cref/{z}/{x}/{y}.png',
             {
-                attribution: '&copy; NOAA',
+                "NOAA/MRMS CONUS Reflectivity at Lowest Altitude": L.tileLayer("http://localhost:8080/mrms_cref/{z}/{x}/{y}.png", { attribution: "&copy; NOAA" })
-                maxZoom: 19
             }
-        ).addTo(m);
+        ).addTo(map);
-        return m;
-    }
-
-    function resize() {
-        if (map) {
-            map.invalidateSize();
-        }
-    }
-
-    function mapAction(container: HTMLElement) {
-        map = createMap(container);
 
         return {
             destroy: () => {
-                if (map) map.remove();
+
-                map = null;
             }
         }
     }
 </script>
 
-<svelte:window on:resize={resize} />
+<div class="container">
-<svelte:head>
+    <div class="map" bind:this={mapEl} use:mapAction></div>
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+</div>
-    <title>wxbox</title>
-</svelte:head>
 
-<div class="map" use:mapAction />
+<style>
-
+    :global(html body) {
-<style lang="css">
+        margin: 0;
+        padding: 0;
+    }
+    .container {
+        display: flex;
+        flex-direction: column;
+    }
     .map {
         width: 100vw;
         height: 100vh;

wxbox-web/src/routes/+page.ts

@@ -1 +0,0 @@
-export const ssr = false;

wxbox-web/src/routes/global.css

@@ -1,4 +0,0 @@
-body {
-    margin: 0;
-    padding: 0;
-}

wxbox-web/svelte.config.js

@@ -3,14 +3,14 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// Consult https://svelte.dev/docs/kit/integrations
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
 
 	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter()
 	}
 };

wxbox-web/tsconfig.json

@@ -11,8 +11,8 @@
 		"strict": true,
 		"moduleResolution": "bundler"
 	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
 	// from the referenced tsconfig.json - TypeScript does not merge them in