use new SvelteKit snapshot feature to restore color scale on browser …

…back navigation

package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/sveriodic-table",
   "repository": "https://github.com/janosh/sveriodic-table",
   "license": "MIT",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "svelte": "index.js",
   "bugs": "https://github.com/janosh/sveriodic-table/issues",
@@ -27,31 +27,31 @@
     "d3-array": "^3.2.2",
     "d3-interpolate-path": "^2.3.0",
     "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
     "d3-scale-chromatic": "^3.0.0",
+    "d3-shape": "^3.2.0",
     "svelte-multiselect": "^8.3.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.30.0",
-    "@sveltejs/adapter-static": "^1.0.6",
-    "@sveltejs/kit": "^1.3.10",
+    "@sveltejs/adapter-static": "^2.0.1",
+    "@sveltejs/kit": "^1.5.5",
     "@sveltejs/package": "^1.0.2",
     "@types/d3-array": "^3.0.4",
     "@types/d3-color": "^3.1.0",
     "@types/d3-interpolate-path": "^2.0.0",
     "@types/d3-scale": "^4.0.3",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-shape": "^3.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
-    "@vitest/coverage-c8": "^0.27.3",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "@vitest/coverage-c8": "^0.28.4",
     "eslint": "^8.33.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
     "jsdom": "^21.1.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex-svelte": "^1.1.2",
@@ -65,7 +65,7 @@
     "svelte2tsx": "^0.6.1",
     "typescript": "^4.9.5",
     "vite": "^4.1.1",
-    "vitest": "^0.27.3"
+    "vitest": "^0.28.4"
   },
   "keywords": [
     "svelte",

src/lib/PropertySelect.svelte

@@ -7,13 +7,15 @@
   export let value: keyof ChemicalElement | null = null
   const options = Object.keys(heatmap_labels)
   export let empty: boolean = false
-  export let selected: string[] = empty ? [] : [options[0]]
+  export let selected: string[] = empty ? [] : [options[1]]
   export let minSelect: number = 0
+  export let id: string | null = null
 
   $: $heatmap_key = heatmap_labels[value ?? ``] ?? null
 </script>
 
 <Select
+  {id}
   {options}
   {selected}
   maxSelect={1}

src/routes/+page.svelte

@@ -13,11 +13,17 @@
   import { property_labels } from '$lib/labels'
   import { active_category, active_element, heatmap_key, last_element } from '$lib/stores'
   import { DemoNav } from '$site'
+  import type { Snapshot } from './$types'
 
   let window_width: number
-  let color_scale: string | ((num: number) => string)
+  let color_scale: string
 
   $: [y_label, y_unit] = property_labels[$heatmap_key] ?? []
+
+  export const snapshot: Snapshot = {
+    capture: () => ({ color_scale }),
+    restore: (values) => ({ color_scale } = values),
+  }
 </script>
 
 <svelte:head>

src/routes/[slug]/+page.svelte

@@ -14,7 +14,7 @@
   import { pretty_num, property_labels } from '$lib/labels'
   import { active_element, heatmap_key } from '$lib/stores'
   import { PrevNextElement } from '$site'
-  import type { PageData } from './$types'
+  import type { PageData, Snapshot } from './$types'
 
   export let data: PageData
 
@@ -65,6 +65,12 @@
   $: scatter_plot_values = element_data.map((el) => el[$heatmap_key])
   $: [y_label, y_unit] = property_labels[$heatmap_key] ?? []
   let color_scale: string
+  let selected: string[]
+
+  export const snapshot: Snapshot = {
+    capture: () => ({ selected }),
+    restore: (values) => ({ selected } = values),
+  }
 </script>
 
 <svelte:window bind:innerWidth={window_width} />
@@ -91,7 +97,7 @@
 
   <label>
     <PropertySelect minSelect={1} />
-    <ColorScaleSelect bind:value={color_scale} minSelect={1} />
+    <ColorScaleSelect bind:value={color_scale} bind:selected minSelect={1} />
   </label>
   <section class="viz">
     <ElementPhoto

svelte.config.js

@@ -1,6 +1,6 @@
 import adapter from '@sveltejs/adapter-static'
 import { mdsvex } from 'mdsvex'
-import examples from 'mdsvexamples'
+import mdsvexamples from 'mdsvexamples'
 import katex from 'rehype-katex-svelte'
 import math from 'remark-math'
 import preprocess from 'svelte-preprocess'
@@ -13,7 +13,7 @@ const defaults = {
   pkg: pkg.name,
   repo: pkg.repository,
 }
-const remarkPlugins = [[examples, { defaults }], math]
+const remarkPlugins = [[mdsvexamples, { defaults }], math]
 const rehypePlugins = [katex]
 
 /** @type {import('@sveltejs/kit').Config} */