Migrate folder node map from writable stores to runes

Author: msmolens

src/treetop/BookmarksManager.test.ts

@@ -1,11 +1,9 @@
-import { get, writable } from 'svelte/store';
-
 import { isBookmark, isFolder } from './bookmarktreenode-utils';
 import { MOBILE_BOOKMARKS_GUID } from './constants';
 import * as Treetop from './types';
 
 /**
- * Class to initialize and manage updating bookmark node stores.
+ * Class to initialize and manage updating bookmark nodes.
  */
 export class BookmarksManager {
   constructor(
@@ -91,8 +89,7 @@ export class BookmarksManager {
    * Create and record a node store for the specified bookmark node.
    */
   private buildFolderNode(node: chrome.bookmarks.BookmarkTreeNode): void {
-    const newNode = this.convertNode(node);
-    const folderNode = writable(newNode);
+    const folderNode = this.convertNode(node);
     this.folderNodeMap.set(node.id, folderNode);
   }
 
@@ -108,9 +105,8 @@ export class BookmarksManager {
 
     node.children = await chrome.bookmarks.getChildren(node.id);
 
-    const newNode = this.convertNode(node);
-    const folderNode = this.folderNodeMap.get(nodeId)!;
-    folderNode.set(newNode);
+    const folderNode = this.convertNode(node);
+    this.folderNodeMap.set(nodeId, folderNode);
   }
 
   /**
@@ -145,9 +141,8 @@ export class BookmarksManager {
 
     if (isFolder(removeInfo.node)) {
       const folderNode = this.folderNodeMap.get(id)!;
-      const nodes: [Treetop.FolderNode] = [get(folderNode)];
+      const nodes = [folderNode];
 
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       while (nodes.length) {
         const node = nodes.pop()!;
         this.folderNodeMap.delete(node.id);
@@ -162,9 +157,8 @@ export class BookmarksManager {
 
         // Enqueue child folders for removal
         for (const childFolderNode of this.folderNodeMap.values()) {
-          const currentNode: Treetop.FolderNode = get(childFolderNode);
-          if (currentNode.parentId === node.id) {
-            nodes.push(currentNode);
+          if (childFolderNode.parentId === node.id) {
+            nodes.push(childFolderNode);
           }
         }
       }

src/treetop/BookmarksManager.ts

@@ -1,7 +1,6 @@
 /* eslint no-irregular-whitespace: ["error", { "skipComments": true }] */
 
-import { SvelteSet } from 'svelte/reactivity';
-import { writable } from 'svelte/store';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { faker } from '@faker-js/faker';
 import { beforeEach, describe, expect, it } from 'vitest';
 
@@ -36,7 +35,7 @@ let folderNode5: Treetop.FolderNode;
 let folderNode6: Treetop.FolderNode;
 
 beforeEach(() => {
-  folderNodeMap = new Map() as Treetop.FolderNodeMap;
+  folderNodeMap = new SvelteMap();
   filterSet = new SvelteSet();
   filterManager = new FilterManager(filterSet, folderNodeMap);
 
@@ -114,12 +113,12 @@ beforeEach(() => {
   });
   folderNode5.children.push(folderNode6);
 
-  folderNodeMap.set(folderNode1.id, writable(folderNode1));
-  folderNodeMap.set(folderNode2.id, writable(folderNode2));
-  folderNodeMap.set(folderNode3.id, writable(folderNode3));
-  folderNodeMap.set(folderNode4.id, writable(folderNode4));
-  folderNodeMap.set(folderNode5.id, writable(folderNode5));
-  folderNodeMap.set(folderNode6.id, writable(folderNode6));
+  folderNodeMap.set(folderNode1.id, folderNode1);
+  folderNodeMap.set(folderNode2.id, folderNode2);
+  folderNodeMap.set(folderNode3.id, folderNode3);
+  folderNodeMap.set(folderNode4.id, folderNode4);
+  folderNodeMap.set(folderNode5.id, folderNode5);
+  folderNodeMap.set(folderNode6.id, folderNode6);
 });
 
 describe('setFilter', () => {

src/treetop/FilterManager.test.ts

@@ -1,5 +1,3 @@
-import { get } from 'svelte/store';
-
 import { isBookmark } from './bookmarktreenode-utils';
 import * as Treetop from './types';
 
@@ -32,8 +30,7 @@ export class FilterManager {
     for (const folderNode of this.folderNodeMap.values()) {
       let addedChild = false;
 
-      const node: Treetop.FolderNode = get(folderNode);
-      for (const child of node.children) {
+      for (const child of folderNode.children) {
         if (child.type === Treetop.NodeType.Bookmark) {
           if (
             this.matchesFilter(child.title) ||
@@ -46,19 +43,18 @@ export class FilterManager {
       }
 
       if (addedChild) {
-        this.filterSet.add(node.id);
+        this.filterSet.add(folderNode.id);
       }
     }
 
     // Pass 2
     // For each folder in the FilterSet, add the folders on the path to the root
     // folder.
     for (const folderNode of this.folderNodeMap.values()) {
-      const node: Treetop.FolderNode = get(folderNode);
-      if (this.filterSet.has(node.id)) {
-        let curNode = node;
+      if (this.filterSet.has(folderNode.id)) {
+        let curNode = folderNode;
         while (curNode.parentId) {
-          curNode = get(this.folderNodeMap.get(curNode.parentId)!);
+          curNode = this.folderNodeMap.get(curNode.parentId)!;
           this.filterSet.add(curNode.id);
         }
       }
@@ -102,9 +98,9 @@ export class FilterManager {
     // Add the folders on the path to the root folder to the FilterSet
     let parentId = bookmark.parentId;
     while (parentId) {
-      const node = get(this.folderNodeMap.get(parentId)!);
-      this.filterSet.add(node.id);
-      parentId = node.parentId;
+      const folderNode = this.folderNodeMap.get(parentId)!;
+      this.filterSet.add(folderNode.id);
+      parentId = folderNode.parentId;
     }
   }
 

src/treetop/FilterManager.ts

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { get, type Writable } from 'svelte/store';
 
   import Bookmark from './Bookmark.svelte';
   import Folder from './Folder.svelte';
@@ -19,12 +18,12 @@
   const filterActive = getContext<() => boolean>('filterActive');
   const filterSet = getContext<Treetop.FilterSet>('filterSet');
 
-  let node: Writable<Treetop.FolderNode> = folderNodeMap.get(nodeId)!;
+  const node = $derived(folderNodeMap.get(nodeId)!);
 
   // Nodes for the folder heading.
   // For the root folder, get the folder nodes from bookmarks root to the selected root.
   // Otherwise, include only the folder node itself.
-  const folderNodes = $derived(root ? getFolderNodes($node) : [$node]);
+  const folderNodes = $derived(root ? getFolderNodes(node) : [node]);
 
   /**
    * Get folder nodes from bookmarks root to the selected root.
@@ -33,8 +32,7 @@
     const nodes = [node];
 
     while (node.parentId) {
-      const folderNode = folderNodeMap.get(node.parentId)!;
-      node = get(folderNode);
+      node = folderNodeMap.get(node.parentId)!;
       nodes.unshift(node);
     }
 
@@ -59,7 +57,7 @@
   // Include selected root title in document title.
   // Don't use fallback title.
   const documentTitle = $derived(
-    $node.title ? `Treetop: ${$node.title}` : 'Treetop',
+    node.title ? `Treetop: ${node.title}` : 'Treetop',
   );
 </script>
 
@@ -117,7 +115,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">
@@ -133,7 +131,7 @@
       {#if root && filterActive() && !filterSet.has(nodeId)}
         <em>{chrome.i18n.getMessage('noResults')}</em>
       {/if}
-      {#each $node.children as child (child.id)}
+      {#each node.children as child (child.id)}
         {#if child.type === Treetop.NodeType.Bookmark}
           <!--
             Destructure child to work around the following false positive linter

src/treetop/Folder.svelte

@@ -1,6 +1,6 @@
 /* eslint no-irregular-whitespace: ["error", { "skipComments": true }] */
 
-import { SvelteDate, SvelteSet } from 'svelte/reactivity';
+import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { type Writable, writable } from 'svelte/store';
 import { render, screen } from '@testing-library/svelte';
 import type { MockInstance } from 'vitest';
@@ -111,8 +111,8 @@ beforeEach(() => {
     rootNodeId: 'bookmarks-root-id',
     builtInFolderIds: ['bookmarks-toolbar-id', 'other-bookmarks-id'],
   };
-  folderNodeMap = new Map() as Treetop.FolderNodeMap;
-  lastVisitTimeMap = new Map() as Treetop.LastVisitTimeMap;
+  folderNodeMap = new SvelteMap();
+  lastVisitTimeMap = new SvelteMap();
   currentFilterActive = false;
   filterSet = new SvelteSet();
   truncate = writable(false);
@@ -129,7 +129,7 @@ describe('rooted at bookmarks root', () => {
       // rootNode
       rootNode = createFolderNode({ id: builtInFolderInfo.rootNodeId! });
 
-      folderNodeMap.set(rootNode.id, writable(rootNode));
+      folderNodeMap.set(rootNode.id, rootNode);
 
       nodeId = rootNode.id;
 
@@ -174,7 +174,7 @@ describe('rooted at bookmarks root', () => {
         title: '',
       });
 
-      folderNodeMap.set(rootNode.id, writable(rootNode));
+      folderNodeMap.set(rootNode.id, rootNode);
 
       nodeId = rootNode.id;
 
@@ -219,8 +219,8 @@ describe('rooted at bookmarks root', () => {
       folderNode.parentId = rootNode.id;
       rootNode.children.push(folderNode);
 
-      folderNodeMap.set(rootNode.id, writable(rootNode));
-      folderNodeMap.set(folderNode.id, writable(folderNode));
+      folderNodeMap.set(rootNode.id, rootNode);
+      folderNodeMap.set(folderNode.id, folderNode);
 
       nodeId = rootNode.id;
 
@@ -287,9 +287,9 @@ describe('rooted at bookmarks root', () => {
       folderNode2.children.push(createBookmarkNode());
       folderNode1.children.push(folderNode2);
 
-      folderNodeMap.set(rootNode.id, writable(rootNode));
-      folderNodeMap.set(folderNode1.id, writable(folderNode1));
-      folderNodeMap.set(folderNode2.id, writable(folderNode2));
+      folderNodeMap.set(rootNode.id, rootNode);
+      folderNodeMap.set(folderNode1.id, folderNode1);
+      folderNodeMap.set(folderNode2.id, folderNode2);
 
       nodeId = rootNode.id;
 
@@ -399,9 +399,9 @@ describe('rooted at bookmarks root', () => {
       folderNode2.children.push(createBookmarkNode());
       rootNode.children.push(folderNode2);
 
-      folderNodeMap.set(rootNode.id, writable(rootNode));
-      folderNodeMap.set(folderNode1.id, writable(folderNode1));
-      folderNodeMap.set(folderNode2.id, writable(folderNode2));
+      folderNodeMap.set(rootNode.id, rootNode);
+      folderNodeMap.set(folderNode1.id, folderNode1);
+      folderNodeMap.set(folderNode2.id, folderNode2);
 
       nodeId = rootNode.id;
 
@@ -506,10 +506,10 @@ describe('rooted at subfolder', () => {
     folderNode3.children.push(createBookmarkNode());
     folderNode2.children.push(folderNode3);
 
-    folderNodeMap.set(rootNode.id, writable(rootNode));
-    folderNodeMap.set(folderNode1.id, writable(folderNode1));
-    folderNodeMap.set(folderNode2.id, writable(folderNode2));
-    folderNodeMap.set(folderNode3.id, writable(folderNode3));
+    folderNodeMap.set(rootNode.id, rootNode);
+    folderNodeMap.set(folderNode1.id, folderNode1);
+    folderNodeMap.set(folderNode2.id, folderNode2);
+    folderNodeMap.set(folderNode3.id, folderNode3);
 
     nodeId = folderNode2.id;
 
@@ -664,10 +664,10 @@ describe('filter active', () => {
     folderNode3.children.push(bookmarkNode6);
     folderNode2.children.push(folderNode3);
 
-    folderNodeMap.set(rootNode.id, writable(rootNode));
-    folderNodeMap.set(folderNode1.id, writable(folderNode1));
-    folderNodeMap.set(folderNode2.id, writable(folderNode2));
-    folderNodeMap.set(folderNode3.id, writable(folderNode3));
+    folderNodeMap.set(rootNode.id, rootNode);
+    folderNodeMap.set(folderNode1.id, folderNode1);
+    folderNodeMap.set(folderNode2.id, folderNode2);
+    folderNodeMap.set(folderNode3.id, folderNode3);
 
     // Enable filter
     currentFilterActive = true;

src/treetop/Folder.svelte.test.ts

@@ -1,6 +1,5 @@
 /* eslint no-irregular-whitespace: ["error", { "skipComments": true }] */
 import { SvelteMap } from 'svelte/reactivity';
-import { writable } from 'svelte/store';
 import { faker } from '@faker-js/faker';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -36,7 +35,7 @@ let folderNode1: Treetop.FolderNode;
 let folderNode2: Treetop.FolderNode;
 
 beforeEach(() => {
-  folderNodeMap = new Map() as Treetop.FolderNodeMap;
+  folderNodeMap = new SvelteMap();
   lastVisitTimeMap = new SvelteMap();
   historyManager = new HistoryManager(lastVisitTimeMap);
 
@@ -62,8 +61,8 @@ beforeEach(() => {
   }
   folderNode1.children.push(folderNode2);
 
-  folderNodeMap.set(folderNode1.id, writable(folderNode1));
-  folderNodeMap.set(folderNode2.id, writable(folderNode2));
+  folderNodeMap.set(folderNode1.id, folderNode1);
+  folderNodeMap.set(folderNode2.id, folderNode2);
 });
 
 describe('init', () => {

src/treetop/HistoryManager.test.ts

@@ -1,5 +1,3 @@
-import { get } from 'svelte/store';
-
 import { isBookmark } from './bookmarktreenode-utils';
 import * as Treetop from './types';
 
@@ -16,8 +14,7 @@ export class HistoryManager {
    */
   init(folderNodeMap: Treetop.FolderNodeMap): void {
     for (const folderNode of folderNodeMap.values()) {
-      const node: Treetop.FolderNode = get(folderNode);
-      node.children.forEach((child) => {
+      folderNode.children.forEach((child) => {
         if (child.type === Treetop.NodeType.Bookmark) {
           this.lastVisitTimeMap.set(child.id, 0);
         }
@@ -42,8 +39,7 @@ export class HistoryManager {
     //
 
     for (const folderNode of folderNodeMap.values()) {
-      const node: Treetop.FolderNode = get(folderNode);
-      node.children.forEach((child) => {
+      folderNode.children.forEach((child) => {
         if (child.type === Treetop.NodeType.Bookmark) {
           const promise = chrome.history.getVisits({
             url: child.url,