Migrate filterActive from a writeable store to runes

Author: msmolens

src/treetop/Folder.svelte

@@ -16,7 +16,7 @@
   const builtInFolderInfo: Treetop.BuiltInFolderInfo =
     getContext('builtInFolderInfo');
   const nodeStoreMap: Treetop.NodeStoreMap = getContext('nodeStoreMap');
-  const filterActive = getContext<Writable<boolean>>('filterActive');
+  const filterActive = getContext<() => boolean>('filterActive');
   const filterSet = getContext<Treetop.FilterSet>('filterSet');
 
   let node: Writable<Treetop.FolderNode> = nodeStoreMap.get(nodeId)!;
@@ -117,7 +117,7 @@
   {/if}
 </svelte:head>
 
-{#if root || !$filterActive || filterSet.has($node.id)}
+{#if root || !filterActive() || filterSet.has($node.id)}
   <div class="folder" class:root>
     <div class="heading">
       <div class="title">
@@ -130,7 +130,7 @@
       </div>
     </div>
     <div class="contents">
-      {#if root && $filterActive && !filterSet.has(nodeId)}
+      {#if root && filterActive() && !filterSet.has(nodeId)}
         <em>{chrome.i18n.getMessage('noResults')}</em>
       {/if}
       {#each $node.children as child (child.id)}
@@ -142,7 +142,7 @@
             Unsafe argument of type `any` assigned to a parameter of type `string`  @typescript-eslint/no-unsafe-argument
           -->
           {@const { id, title, url } = child}
-          {#if !$filterActive || filterSet.has(id)}
+          {#if !filterActive() || filterSet.has(id)}
             <Bookmark nodeId={id} {title} {url} />
           {/if}
         {:else if child.type === Treetop.NodeType.Folder}

src/treetop/Folder.svelte.test.ts

@@ -18,7 +18,8 @@ import {
 // Folder component requirements
 let builtInFolderInfo: Treetop.BuiltInFolderInfo;
 let nodeStoreMap: Treetop.NodeStoreMap;
-let filterActive: Writable<boolean>;
+let currentFilterActive: boolean;
+const filterActive = () => currentFilterActive;
 let filterSet: Treetop.FilterSet;
 let nodeId: string;
 
@@ -112,7 +113,7 @@ beforeEach(() => {
   };
   nodeStoreMap = new Map() as Treetop.NodeStoreMap;
   lastVisitTimeMap = new Map() as Treetop.LastVisitTimeMap;
-  filterActive = writable(false);
+  currentFilterActive = false;
   filterSet = new SvelteSet();
   truncate = writable(false);
   tooltips = writable(false);
@@ -669,7 +670,7 @@ describe('filter active', () => {
     nodeStoreMap.set(folderNode3.id, writable(folderNode3));
 
     // Enable filter
-    filterActive.set(true);
+    currentFilterActive = true;
   });
 
   describe('rooted at bookmarks root', () => {

src/treetop/Treetop.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
   import { onDestroy, onMount, setContext } from 'svelte';
   import { SvelteSet } from 'svelte/reactivity';
-  import {
-    get,
-    type Unsubscriber,
-    type Writable,
-    writable,
-  } from 'svelte/store';
+  import { get, type Unsubscriber, type Writable } from 'svelte/store';
   import { fade } from 'svelte/transition';
   import LinearProgress from '@smui/linear-progress';
   import Snackbar, { Label } from '@smui/snackbar';
@@ -95,8 +90,8 @@
   // Filter manager
   const filterManager = new FilterManager(filterSet, nodeStoreMap);
 
-  // Store for whether filter is active.
-  const filterActive = writable(false);
+  // Whether the filter is active.
+  let filterActive = $state(false);
 
   // Clock to age recently visited bookmarks
   const clock = createClock();
@@ -105,7 +100,7 @@
   setContext('builtInFolderInfo', builtInFolderInfo);
   setContext('nodeStoreMap', nodeStoreMap);
   setContext('lastVisitTimeMap', lastVisitTimeMap);
-  setContext('filterActive', filterActive);
+  setContext('filterActive', () => filterActive);
   setContext('filterSet', filterSet);
   setContext('clock', clock);
 
@@ -186,7 +181,7 @@
     const nodeStore = nodeStoreMap.get(nodeId)!;
     const node: Treetop.FolderNode = get(nodeStore);
 
-    const activeFilterSet = get(filterActive) ? filterSet : undefined;
+    const activeFilterSet = filterActive ? filterSet : undefined;
 
     const promises: Promise<chrome.tabs.Tab>[] = [];
 
@@ -504,13 +499,13 @@
   function applyFilter(filter: string) {
     // Clear any previous filtering
     filterManager.clearFilter();
-    filterActive.set(false);
+    filterActive = false;
 
     // Set the current filter if the string is not empty
     const value = filter.trim();
     if (value && value.length > 0) {
       filterManager.setFilter(value);
-      filterActive.set(true);
+      filterActive = true;
     }
   }
 
@@ -590,7 +585,7 @@
       new DeleteMenuItem(
         builtInFolderInfo,
         nodeStoreMap,
-        filterActive,
+        () => filterActive,
         deleteBookmark,
       ),
     );

src/treetop/menus/DeleteMenuItem.test.ts

@@ -1,4 +1,4 @@
-import { type Writable, writable } from 'svelte/store';
+import { writable } from 'svelte/store';
 import { faker } from '@faker-js/faker';
 import { beforeEach, describe, expect, it } from 'vitest';
 
@@ -10,7 +10,8 @@ import { createFolderNode } from '../../../test/utils/factories';
 
 let menuItem: DeleteMenuItem;
 let nodeStoreMap: Treetop.NodeStoreMap;
-let filterActive: Writable<boolean>;
+let currentFilterActive: boolean;
+const filterActive = () => currentFilterActive;
 
 const BUILT_IN_FOLDER_INFO: Treetop.BuiltInFolderInfo = {
   rootNodeId: 'bookmarks-root-id',
@@ -19,7 +20,7 @@ const BUILT_IN_FOLDER_INFO: Treetop.BuiltInFolderInfo = {
 
 beforeEach(() => {
   nodeStoreMap = new Map() as Treetop.NodeStoreMap;
-  filterActive = writable(false);
+  currentFilterActive = false;
 
   const callback: OnClickedCallback = (nodeId) => {
     void nodeId;
@@ -53,7 +54,7 @@ describe('when a filter is active', () => {
     folderNode = createFolderNode();
     nodeStoreMap.set(folderNode.id, writable(folderNode));
 
-    filterActive.set(true);
+    currentFilterActive = true;
   });
 
   it('is disabled for a folder', () => {

src/treetop/menus/DeleteMenuItem.ts

@@ -1,5 +1,3 @@
-import { get, type Writable } from 'svelte/store';
-
 import type * as Treetop from '@Treetop/treetop/types';
 
 import { MenuItem, type OnClickedCallback } from './MenuItem';
@@ -11,7 +9,7 @@ export class DeleteMenuItem extends MenuItem {
   constructor(
     private readonly builtInFolderInfo: Treetop.BuiltInFolderInfo,
     private readonly nodeStoreMap: Treetop.NodeStoreMap,
-    private readonly filterActive: Writable<boolean>,
+    private readonly filterActive: () => boolean,
     onClickedCallback: OnClickedCallback,
   ) {
     super(onClickedCallback);
@@ -25,7 +23,7 @@ export class DeleteMenuItem extends MenuItem {
     }
 
     // Disable deleting folders when filter is active
-    if (this.nodeStoreMap.has(nodeId) && get(this.filterActive)) {
+    if (this.nodeStoreMap.has(nodeId) && this.filterActive()) {
       return false;
     }