feat: refactor context handling in Svelte components and improve data resolution methods in CBNData

Author: ushkinaz

_test/all.meta.json

@@ -1,5 +1,5 @@
 {
-  "buildNum": "2026-02-17",
-  "sha": "32d65f15387ee6bedf0cb83216d1b1795fef2c568bb7a0f2c969eeedbbcb6a8a",
-  "modsSha": "377429dce1c657a236b8f3a16b1173f8b160cb0ef36d1a4aa346e6e3753ae35c"
+  "buildNum": "2026-03-04",
+  "sha": "90c827a8a8f5947054cda959af33ca9f1d6461ffac4308c9b9e9c1aa5f53a54e",
+  "modsSha": "1bd039194b1acfdafe6bd2dc1966df4a1027b20749680d089c5e5d46e16b58b5"
 }

src/Catalog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { setContext } from "svelte";
+import { setContext, untrack } from "svelte";
 import { t } from "@transifex/native";
 
 import { byName, CBNData, singularName, pluralName, plural } from "./data";
@@ -16,7 +16,6 @@ import MutationCategory from "./types/MutationCategory.svelte";
 import ItemLink from "./types/ItemLink.svelte";
 import { groupBy } from "./utils/collections";
 import OvermapAppearance from "./types/item/OvermapAppearance.svelte";
-import { createLiveContextProxy } from "./contextProxy";
 
 interface Props {
   // TODO: Transifex extraction only recognizes direct t("...") keys; replace t(plural(type)) heading with literal branches.
@@ -28,7 +27,7 @@ let { type: typeProp, data: dataProp }: Props = $props();
 let type = $derived(typeProp);
 let data = $derived(dataProp);
 let typeWithCorrectType = $derived(type as keyof SupportedTypesWithMapped);
-const dataContext = createLiveContextProxy(() => dataProp);
+const dataContext: CBNData = untrack(() => dataProp);
 setContext("data", dataContext);
 
 let things = $derived.by(() =>

src/SearchResults.svelte

@@ -2,7 +2,7 @@
 import { type CBNData, loadProgress, mapType, plural } from "./data";
 import ItemLink from "./types/ItemLink.svelte";
 import type { OvermapSpecial } from "./types";
-import { setContext } from "svelte";
+import { setContext, untrack } from "svelte";
 import { t } from "@transifex/native";
 import LimitedList from "./LimitedList.svelte";
 import {
@@ -11,7 +11,6 @@ import {
 } from "./types/item/spawnLocations";
 import { type SearchResult, searchResults } from "./search";
 import Loading from "./Loading.svelte";
-import { createLiveContextProxy } from "./contextProxy";
 
 interface Props {
   data: CBNData;
@@ -21,7 +20,7 @@ interface Props {
 let { data: dataProp, search: searchProp }: Props = $props();
 let data = $derived(dataProp);
 let search = $derived(searchProp);
-const dataContext = createLiveContextProxy(() => dataProp);
+const dataContext: CBNData = untrack(() => dataProp);
 setContext("data", dataContext);
 
 //TODO: Transifex extraction only recognizes direct t("...") keys; replace t(plural(...)) section heading below with literal branches.

src/Thing.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { t } from "@transifex/native";
-import { onMount, setContext, type Component } from "svelte";
+import { onMount, setContext, untrack, type Component } from "svelte";
 
 import type { CBNData } from "./data";
 import Monster from "./types/Monster.svelte";
@@ -35,7 +35,6 @@ import Technique from "./types/Technique.svelte";
 import { metrics } from "./metrics";
 import { nowTimeStamp } from "./utils/perf";
 import { isTesting } from "./utils/env";
-import { createLiveContextProxy } from "./contextProxy";
 
 interface Props {
   item: { id: string; type: string };
@@ -45,7 +44,8 @@ interface Props {
 let { item: itemProp, data: dataProp }: Props = $props();
 let item = $derived(itemProp);
 let data = $derived(dataProp);
-const dataContext = createLiveContextProxy(() => dataProp);
+// Route-keyed mounts mean `data` is fixed for this component instance.
+const dataContext: CBNData = untrack(() => dataProp);
 setContext("data", dataContext);
 let error: Error | null = $state(null);
 

src/WithData.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-import { setContext } from "svelte";
-import { createLiveContextProxy } from "./contextProxy";
+import { setContext, untrack } from "svelte";
 
 interface Props {
   Component: any;
@@ -9,7 +8,7 @@ interface Props {
 }
 
 let { Component, data, ...rest }: Props = $props();
-const dataContext = createLiveContextProxy(() => data);
+const dataContext = untrack(() => data);
 
 setContext("data", dataContext);
 </script>

src/contextProxy.ts

@@ -680,6 +680,25 @@ export class CBNData {
     }
   }
 
+  hasById<TypeName extends keyof SupportedTypesWithMapped>(
+    type: TypeName,
+    id: string,
+  ): boolean {
+    if (typeof id !== "string") return false;
+    return this._byTypeById.get(type)?.has(id) ?? false;
+  }
+
+  resolveOneById<TypeName extends keyof SupportedTypesWithMapped>(
+    type: TypeName,
+    id: string,
+    key: string,
+  ): unknown {
+    if (typeof id !== "string") return undefined;
+    const obj = this._byTypeById.get(type)?.get(id);
+    if (!obj) return undefined;
+    return this.resolveOne(obj, key);
+  }
+
   /**
    * Retrieves an object by type and ID, resolving inheritance.
    * Throws an error if the object is not found.

src/data.ts

@@ -154,11 +154,28 @@ export function makeModRenderTests(modId: string): void {
     renderCaseTuplesByMod.get(modId)!.push([type, id]);
   }
 
+  const renderPriority = (rawType: string): number => {
+    const mappedType = mapType(rawType as any);
+    if (mappedType === "overmap_special") return 0;
+    if (mappedType === "item") return 2;
+    return 1;
+  };
+
   afterEach(cleanup);
 
   for (const [modId, mod] of modSubset) {
     const modData = mod.data ?? [];
-    const tuples = renderCaseTuplesByMod.get(modId) ?? [];
+    const tuples = [...(renderCaseTuplesByMod.get(modId) ?? [])].sort(
+      ([typeA, idA], [typeB, idB]) => {
+        const p = renderPriority(typeA) - renderPriority(typeB);
+        if (p !== 0) return p;
+        const typeCmp = mapType(typeA as any).localeCompare(
+          mapType(typeB as any),
+        );
+        if (typeCmp !== 0) return typeCmp;
+        return idA.localeCompare(idB);
+      },
+    );
     let Thing: any;
     let data: CBNData | undefined;
 
@@ -224,18 +241,21 @@ export function makeModRenderTests(modId: string): void {
         { timeout: MOD_RENDER_TIMEOUT_MS },
         async (type, id) => {
           (globalThis as any).__isTesting__ = true;
-          const { container } = render(Thing, {
+          const { container, unmount } = render(Thing, {
             item: { type: mapType(type as any), id },
             data: data!,
           });
           await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
           expect(screen.queryByTestId("loading-indicator")).toBe(null);
           if (type !== "technique") {
-            expect(
-              container.textContent,
-              `Rendered output for ${modId}:${type}:${id} contains invalid placeholder text.`,
-            ).not.toMatch(/undefined|NaN|object Object/);
+            const renderedText = container.textContent ?? "";
+            if (/undefined|NaN|object Object/.test(renderedText)) {
+              throw new Error(
+                `Rendered output for ${modId}:${type}:${id} contains invalid placeholder text.`,
+              );
+            }
           }
+          unmount();
         },
       );
     });