fix DemoNav active route

fix ColorCustomizer reset button not showing up because binding category_colors
was changing default_category_colors in place
add CSS var(--text-color)
replace await sleep() with svelte's await tick() in unit tests
update deps

package.json

@@ -24,14 +24,14 @@
   },
   "dependencies": {
     "@iconify/svelte": "^3.1.0",
-    "@sveltejs/kit": "1.9.3",
+    "@sveltejs/kit": "1.11.0",
     "d3-array": "^3.2.2",
     "d3-color": "^3.1.0",
     "d3-interpolate-path": "^2.3.0",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
-    "svelte": "^3.55.1",
+    "svelte": "^3.56.0",
     "svelte-multiselect": "^8.4.0"
   },
   "devDependencies": {
@@ -44,8 +44,8 @@
     "@types/d3-scale": "^4.0.3",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-shape": "^3.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/parser": "^5.54.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "@vitest/coverage-c8": "^0.29.2",
     "eslint": "^8.35.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -59,11 +59,11 @@
     "rehype-katex-svelte": "^1.1.2",
     "rehype-slug": "^5.1.0",
     "remark-math": "3.0.0",
-    "svelte-check": "^3.0.4",
+    "svelte-check": "^3.1.0",
     "svelte-preprocess": "^5.0.1",
     "svelte-toc": "^0.5.2",
     "svelte-zoo": "^0.3.4",
-    "svelte2tsx": "^0.6.2",
+    "svelte2tsx": "^0.6.3",
     "typescript": "^4.9.5",
     "vite": "^4.1.4",
     "vitest": "^0.29.2"

playwright.config.ts

@@ -1,10 +1,8 @@
 import type { PlaywrightTestConfig } from '@playwright/test'
 
-const config: PlaywrightTestConfig = {
+export default {
   webServer: {
     command: `vite dev --port 3005`,
     port: 3005,
   },
-}
-
-export default config
+} satisfies PlaywrightTestConfig

src/app.css

@@ -1,4 +1,6 @@
 :root {
+  --text-color: #eee;
+
   --page-bg: #090019;
   --diatomic-nonmetal-bg-color: #ff8c00;
   --noble-gas-bg-color: darkorchid;
@@ -14,12 +16,12 @@
 
   --toc-mobile-bg: #1c0e3e;
   --toc-li-padding: 4pt 7pt;
-  --toc-mobile-btn-color: white;
+  --toc-mobile-btn-color: var(--text-color);
   --toc-desktop-nav-margin: 0 0 0 1em;
   --toc-active-bg: teal;
 
   --zoo-github-corner-color: var(--page-bg);
-  --zoo-github-corner-bg: white;
+  --zoo-github-corner-bg: var(--text-color);
 
   --sms-options-bg: rgb(20, 18, 36);
   --sms-max-width: 19em;
@@ -32,7 +34,7 @@ body {
   padding: 6vh 3vw;
   font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   margin: auto;
-  color: #eee;
+  color: var(--text-color);
   line-height: 1.5;
 }
 main {
@@ -49,7 +51,7 @@ a {
 
 button,
 a.btn {
-  color: white;
+  color: var(--text-color);
   cursor: pointer;
   border: none;
   border-radius: 3pt;
@@ -125,7 +127,7 @@ textarea {
   display: block;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.1);
-  color: white;
+  color: var(--text-color);
   min-height: 100px;
   box-sizing: border-box;
   margin: 1em auto;

src/lib/ColorCustomizer.svelte

@@ -94,7 +94,7 @@
   }
   label > button {
     background: none;
-    color: white;
+    color: var(--text-color);
     opacity: 0;
     transition: 0.3s;
     border-radius: 2pt;

src/lib/ElementPhoto.svelte

@@ -52,7 +52,7 @@
       rgba(0, 100, 0, 0.5),
       rgba(0, 0, 100, 0.3)
     );
-    color: white;
+    color: var(--text-color);
     border-radius: 4pt;
     width: 100%;
     container-type: inline-size;

src/lib/element-data.ts

@@ -4,7 +4,7 @@
 
 import type { ChemicalElement } from '$lib'
 
-const element_data: ChemicalElement[] = [
+export default [
   {
     name: `Hydrogen`,
     appearance: `colorless gas`,
@@ -5288,6 +5288,4 @@ const element_data: ChemicalElement[] = [
     jmol_color: null,
     covalent_radius: null,
   },
-]
-
-export default element_data
+] satisfies ChemicalElement[]

src/lib/stores.ts

@@ -49,5 +49,5 @@ export const default_category_colors: Record<string, string> = {
 }
 export const category_colors = session_store<Record<string, string>>(
   `category-colors`,
-  default_category_colors
+  { ...default_category_colors }
 )

src/routes/(demos)/nucleus/+page.svx

@@ -6,9 +6,9 @@
 </script>
 
 <ul>
-  {#each element_data as { protons, neutrons, symbol }}
+  {#each element_data as { protons, neutrons, symbol, name }}
     <li>
-      <span>{symbol}</span>
+      <a href="/{name.toLowerCase()}">{symbol}</a>
       <Nucleus {protons} {neutrons} />
     </li>
   {/each}
@@ -24,9 +24,10 @@
   ul > li {
     position: relative;
   }
-  ul > li > span {
+  ul > li > a {
     position: absolute;
     top: -1em;
+    color: var(--color-text);
   }
 </style>
 ```

src/site/DemoNav.svelte

@@ -10,8 +10,7 @@
     throw new Error(`Too few demo routes found: ${routes.length}`)
   }
   $: is_current = (path: string) => {
-    if (path === $page.url.pathname) return `page`
-    if (path !== `/` && $page.url.pathname.includes(path)) return `page`
+    if (`/${path}` == $page.url.pathname) return `page`
     return undefined
   }
 </script>

src/site/EasterEgg.svelte

@@ -76,7 +76,7 @@
     bottom: 0;
     right: 0;
     background-color: rgba(255, 255, 255, 0.2);
-    color: white;
+    color: var(--text-color);
     padding: 4pt 6pt;
     border-radius: 1ex 0 0 0;
     cursor: pointer;

tests/unit/index.ts

@@ -4,10 +4,6 @@ beforeEach(() => {
   document.body.innerHTML = ``
 })
 
-export async function sleep(ms = 1) {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
-
 export function doc_query<T extends HTMLElement>(selector: string): T {
   const node = document.querySelector(selector)
   if (!node) throw new Error(`No element found for selector: ${selector}`)

tests/unit/periodic-table.test.ts

@@ -1,7 +1,8 @@
 import { element_data, PeriodicTable, PropertySelect } from '$lib'
 import { category_counts, heatmap_labels } from '$lib/labels'
+import { tick } from 'svelte'
 import { describe, expect, test, vi } from 'vitest'
-import { doc_query, sleep } from '.'
+import { doc_query } from '.'
 
 describe(`PeriodicTable`, () => {
   test.each([
@@ -43,11 +44,11 @@ describe(`PeriodicTable`, () => {
     const element_tile = doc_query(`.element-tile`)
 
     element_tile?.dispatchEvent(new MouseEvent(`mouseenter`))
-    await sleep()
+    await tick()
     expect([...element_tile.classList]).toContain(`active`)
 
     element_tile?.dispatchEvent(new MouseEvent(`mouseleave`))
-    await sleep()
+    await tick()
     expect([...element_tile.classList]).not.toContain(`active`)
   })
 
@@ -60,13 +61,13 @@ describe(`PeriodicTable`, () => {
     const element_tile = document.querySelectorAll(`.element-tile`)[rand_idx]
 
     element_tile?.dispatchEvent(new MouseEvent(`mouseenter`))
-    await sleep()
+    await tick()
 
     const element_photo = doc_query(`img[alt="${random_element.name}"]`)
     expect(element_photo?.style.gridArea).toBe(`9/1/span 2/span 2`)
 
     element_tile?.dispatchEvent(new MouseEvent(`mouseleave`))
-    await sleep()
+    await tick()
     expect(document.querySelector(`img`)).toBeNull()
   })
 
@@ -76,7 +77,7 @@ describe(`PeriodicTable`, () => {
 
     const li = doc_query(`ul.options > li`)
     li.dispatchEvent(new MouseEvent(`mouseup`))
-    await sleep()
+    await tick()
 
     const selected = doc_query(`div.multiselect > ul.selected`)
     const heatmap_label = `Atomic Mass (u)`
@@ -85,7 +86,7 @@ describe(`PeriodicTable`, () => {
 
     expect(heatmap_key).toBe(`atomic_mass`)
     ptable.$set({ heatmap_values: element_data.map((e) => e[heatmap_key]) })
-    await sleep()
+    await tick()
 
     const element_tile = doc_query(`div.element-tile`)
     // hydrogen with lowest mass should be blue (low end of color scale)
@@ -124,12 +125,12 @@ describe(`PeriodicTable`, () => {
 
     const element_tile = doc_query(`.element-tile`)
     element_tile?.dispatchEvent(new MouseEvent(`click`))
-    await sleep()
+    await tick()
     expect(emitted).toBe(true)
 
     expected_active = true
     element_tile?.dispatchEvent(new MouseEvent(`mouseenter`))
-    await sleep()
+    await tick()
 
     element_tile?.dispatchEvent(new MouseEvent(`click`))
   })

vite.config.ts

@@ -3,7 +3,7 @@ import mdsvexamples from 'mdsvexamples/vite'
 import type { UserConfig } from 'vite'
 import type { UserConfig as VitestConfig } from 'vitest'
 
-const vite_config: UserConfig & { test: VitestConfig } = {
+export default {
   plugins: [sveltekit(), mdsvexamples],
 
   test: {
@@ -22,6 +22,4 @@ const vite_config: UserConfig & { test: VitestConfig } = {
   preview: {
     port: 3000,
   },
-}
-
-export default vite_config
+} satisfies UserConfig & { test: VitestConfig }