Migrate to type-safe context

Replace calls to `setContext` and `getContext` with type-specific
accessor functions created by `createContext` [1].

Update the Bookmark and Folder component tests to use dedicated wrapper
components that set the context using the typed accessor functions.

Remove the legacy generic `ContextWrapper` wrapper component.

[1] sveltejs/svelte#16948

Author: msmolens

eslint.config.js

@@ -23,7 +23,6 @@ export default defineConfig(
     'eslint.config.js',
     'svelte.config.js',
     '**/vite.*.ts',
-    './test/utils/ContextWrapper.svelte',
   ]),
   {
     languageOptions: {

src/options/Options.svelte.test.ts

@@ -3,14 +3,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import Options from '@Treetop/options/Options.svelte';
 
-import ContextWrapper from '../../test/utils/ContextWrapper.svelte';
-
 const setup = () => {
-  render(ContextWrapper, {
-    Component: Options,
-    Props: {},
-    Context: {},
-  });
+  render(Options);
 };
 
 describe('Options', () => {

src/treetop/Bookmark.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
-  import type { SvelteDate } from 'svelte/reactivity';
   import lodashTruncate from 'lodash-es/truncate';
 
-  import type * as Treetop from './types';
+  import {
+    getClock,
+    getLastVisitTimeMap,
+    getTooltips,
+    getTruncate,
+  } from './context';
   import { truncateMiddle } from './utils';
 
   interface Props {
@@ -14,11 +17,10 @@
 
   let { nodeId, title, url }: Props = $props();
 
-  const lastVisitTimeMap: Treetop.LastVisitTimeMap =
-    getContext('lastVisitTimeMap');
-  const truncate = getContext<() => boolean>('truncate');
-  const tooltips = getContext<() => boolean>('tooltips');
-  const clock = getContext<SvelteDate>('clock');
+  const lastVisitTimeMap = getLastVisitTimeMap();
+  const truncate = getTruncate();
+  const tooltips = getTooltips();
+  const clock = getClock();
 
   const lastVisitTime = $derived(lastVisitTimeMap.get(nodeId)!);
 

src/treetop/Bookmark.svelte.test.ts

@@ -4,10 +4,9 @@ import { render, screen } from '@testing-library/svelte';
 import escapeRegExp from 'lodash-es/escapeRegExp';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import Bookmark from '@Treetop/treetop/Bookmark.svelte';
 import type * as Treetop from '@Treetop/treetop/types';
 
-import ContextWrapper from '../../test/utils/ContextWrapper.svelte';
+import BookmarkWrapper from '../../test/utils/BookmarkWrapper.svelte';
 
 let lastVisitTimeMap: Treetop.LastVisitTimeMap;
 let currentTruncate: boolean;
@@ -29,15 +28,14 @@ const MILLISECONDS_PER_HOUR =
   60; // minutes per hour
 
 const setup = () => {
-  render(ContextWrapper, {
-    Component: Bookmark,
-    Props: { nodeId, title, url },
-    Context: {
-      lastVisitTimeMap,
-      truncate,
-      tooltips,
-      clock,
-    },
+  render(BookmarkWrapper, {
+    lastVisitTimeMap,
+    truncate,
+    tooltips,
+    clock,
+    nodeId,
+    title,
+    url,
   });
 };
 

src/treetop/Folder.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
-
   import Bookmark from './Bookmark.svelte';
+  import {
+    getBuiltInFolderInfo,
+    getFilterActive,
+    getFilterSet,
+    getFolderNodeMap,
+  } from './context';
   import Folder from './Folder.svelte';
   import * as Treetop from './types';
 
@@ -12,11 +16,10 @@
 
   let { nodeId, root = false }: Props = $props();
 
-  const builtInFolderInfo: Treetop.BuiltInFolderInfo =
-    getContext('builtInFolderInfo');
-  const folderNodeMap = getContext<Treetop.FolderNodeMap>('folderNodeMap');
-  const filterActive = getContext<() => boolean>('filterActive');
-  const filterSet = getContext<Treetop.FilterSet>('filterSet');
+  const builtInFolderInfo = getBuiltInFolderInfo();
+  const folderNodeMap = getFolderNodeMap();
+  const filterActive = getFilterActive();
+  const filterSet = getFilterSet();
 
   const node = $derived(folderNodeMap.get(nodeId)!);
 

src/treetop/Folder.svelte.test.ts

@@ -5,14 +5,13 @@ import { render, screen } from '@testing-library/svelte';
 import type { MockInstance } from 'vitest';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import Folder from '@Treetop/treetop/Folder.svelte';
 import type * as Treetop from '@Treetop/treetop/types';
 
-import ContextWrapper from '../../test/utils/ContextWrapper.svelte';
 import {
   createBookmarkNode,
   createFolderNode,
 } from '../../test/utils/factories';
+import FolderWrapper from '../../test/utils/FolderWrapper.svelte';
 
 // Folder component requirements
 let builtInFolderInfo: Treetop.BuiltInFolderInfo;
@@ -31,22 +30,17 @@ let clock: SvelteDate;
 let rootNode: Treetop.FolderNode;
 
 const setup = () => {
-  render(ContextWrapper, {
-    Component: Folder,
-    Props: {
-      nodeId,
-      root: true,
-    },
-    Context: {
-      builtInFolderInfo,
-      folderNodeMap,
-      lastVisitTimeMap,
-      filterActive,
-      filterSet,
-      truncate,
-      tooltips,
-      clock,
-    },
+  render(FolderWrapper, {
+    builtInFolderInfo,
+    folderNodeMap,
+    lastVisitTimeMap,
+    filterActive,
+    filterSet,
+    truncate,
+    tooltips,
+    clock,
+    nodeId,
+    root: true,
   });
 };
 

src/treetop/Treetop.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy, onMount, setContext } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
   import { fade } from 'svelte/transition';
   import LinearProgress from '@smui/linear-progress';
@@ -14,6 +14,16 @@
   import { BookmarksManager } from './BookmarksManager';
   import { createClock } from './clock.svelte';
   import ConfirmationDialog from './ConfirmationDialog.svelte';
+  import {
+    setBuiltInFolderInfo,
+    setClock,
+    setFilterActive,
+    setFilterSet,
+    setFolderNodeMap,
+    setLastVisitTimeMap,
+    setTooltips,
+    setTruncate,
+  } from './context';
   import FilterInput from './FilterInput.svelte';
   import { FilterManager } from './FilterManager';
   import Folder from './Folder.svelte';
@@ -47,8 +57,8 @@
   );
 
   // Make select preferences available to other components
-  setContext('truncate', truncate);
-  setContext('tooltips', tooltips);
+  setTruncate(truncate);
+  setTooltips(tooltips);
 
   //
   // Create bookmarks data and manager
@@ -90,12 +100,12 @@
   const clock = createClock();
 
   // Make bookmark data available to other components
-  setContext('builtInFolderInfo', builtInFolderInfo);
-  setContext('folderNodeMap', folderNodeMap);
-  setContext('lastVisitTimeMap', lastVisitTimeMap);
-  setContext('filterActive', () => filterActive);
-  setContext('filterSet', filterSet);
-  setContext('clock', clock);
+  setBuiltInFolderInfo(builtInFolderInfo);
+  setFolderNodeMap(folderNodeMap);
+  setLastVisitTimeMap(lastVisitTimeMap);
+  setFilterActive(() => filterActive);
+  setFilterSet(filterSet);
+  setClock(clock);
 
   //
   // Error notification

src/treetop/Treetop.svelte.test.ts

@@ -3,16 +3,11 @@ import { describe, expect, it, vi } from 'vitest';
 
 import Treetop from '@Treetop/treetop/Treetop.svelte';
 
-import ContextWrapper from '../../test/utils/ContextWrapper.svelte';
 import { createBrowserBookmarksTree } from '../../test/utils/factories';
 
 const setup = () => {
-  render(ContextWrapper, {
-    Component: Treetop,
-    Props: {
-      rootBookmarkId: null,
-    },
-    Context: {},
+  render(Treetop, {
+    rootBookmarkId: null,
   });
 };
 

src/treetop/context.ts

@@ -0,0 +1,26 @@
+import { createContext } from 'svelte';
+import type { SvelteDate } from 'svelte/reactivity';
+
+import * as Treetop from './types';
+
+export const [getBuiltInFolderInfo, setBuiltInFolderInfo] =
+  createContext<Treetop.BuiltInFolderInfo>();
+
+export const [getClock, setClock] = createContext<SvelteDate>();
+
+export const [getFilterActive, setFilterActive] =
+  createContext<() => boolean>();
+
+export const [getFilterSet, setFilterSet] = createContext<Treetop.FilterSet>();
+
+export const [getFolderNodeMap, setFolderNodeMap] =
+  createContext<Treetop.FolderNodeMap>();
+
+export const [getLastVisitTimeMap, setLastVisitTimeMap] =
+  createContext<Treetop.LastVisitTimeMap>();
+
+export const [getTooltips, setTooltips] =
+  createContext<() => Treetop.PreferenceValue>();
+
+export const [getTruncate, setTruncate] =
+  createContext<() => Treetop.PreferenceValue>();

test/utils/BookmarkWrapper.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  // Wrapper component to test Bookmark component with context.
+  import type { ComponentProps } from 'svelte';
+  import type { SvelteDate } from 'svelte/reactivity';
+
+  import Bookmark from '@Treetop/treetop/Bookmark.svelte';
+  import {
+    setClock,
+    setLastVisitTimeMap,
+    setTooltips,
+    setTruncate,
+  } from '@Treetop/treetop/context';
+  import * as Treetop from '@Treetop/treetop/types';
+
+  type BookmarkProps = ComponentProps<typeof Bookmark>;
+
+  type Props = BookmarkProps & {
+    lastVisitTimeMap: Treetop.LastVisitTimeMap;
+    truncate: () => boolean;
+    tooltips: () => boolean;
+    clock: SvelteDate;
+  };
+
+  const { lastVisitTimeMap, truncate, tooltips, clock, ...props }: Props =
+    $props();
+
+  setLastVisitTimeMap(lastVisitTimeMap);
+  setTruncate(truncate);
+  setTooltips(tooltips);
+  setClock(clock);
+</script>
+
+<Bookmark {...props} />