From 03205c8c3fb24236b80a6b0198dd96b550bea873 Mon Sep 17 00:00:00 2001
From: Logan Snow <4197432+lsnow99@users.noreply.github.com>
Date: Fri, 30 Jan 2026 00:12:17 -0500
Subject: [PATCH 1/5] Added test

---
 Makefile                       |  2 +-
 src/App.svelte                 | 29 ++++++++++-------------------
 src/Cell.svelte                |  2 +-
 src/SaveLoad.svelte            |  6 ++----
 src/Settings.svelte            |  2 +-
 src/Table.svelte               |  2 +-
 src/Tabs.svelte                |  2 +-
 src/classes.svelte.js          | 25 +++++++++++++------------
 test/sheet-and-formula.test.js | 26 ++++++++++++++++++++++++--
 9 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/Makefile b/Makefile
index 8d7bb56..30562ef 100644
--- a/Makefile
+++ b/Makefile
@@ -13,7 +13,7 @@ test: node_modules
 	npx vitest run --coverage
 
 watch-test: node_modules
-	npx vitest --coverage
+	npx vitest --coverage --bail 1
 
 pre-commit-check: pre-commit-lint test
 
diff --git a/src/App.svelte b/src/App.svelte
index 5ad6bd2..546ecce 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -127,9 +127,8 @@
   } from "./lib/helpers.js";
 
   let { urlData } = $props();
-  let globals = $state(
-    load(urlData) ?? new State([new Sheet("Sheet 1", 10, 10)]),
-  );
+  let globals;
+  globals = load(urlData) ?? new State([new Sheet("Sheet 1", 10, 10)]);
   let table = $state();
   let startHeight = $state(0);
   let scrollArea = $state();
@@ -162,7 +161,7 @@
         return undefined;
       }
     }
-    return State.load(data);
+    return State.loadNew(data);
   }
 
   let dontSave = $state(false);
@@ -309,15 +308,7 @@
       return;
     }
     dontSave = true;
-    globals = Object.assign(State.load(e.state), {
-      currentSheetIndex: globals.currentSheetIndex,
-      mode: globals.mode,
-      helpOpen: globals.helpOpen,
-      editorOpen: globals.editorOpen,
-      imageOpen: globals.imageOpen,
-      elements: globals.elements,
-      pasteBuffer: globals.pasteBuffer,
-    });
+    globals.load(e.state);
   }}
   bind:innerHeight
 />
@@ -326,12 +317,12 @@
 {#if navigator.maxTouchPoints <= 1}
   <!-- Else float the bar above the virtual keyboard -->
   <div>
-    <FormulaBar bind:globals bind:editor={globals.elements.formulaBar} />
+    <FormulaBar {globals} bind:editor={globals.elements.formulaBar} />
   </div>
 {/if}
 
 <div class="tabs">
-  <Tabs bind:globals bind:value={globals.currentSheetIndex} />
+  <Tabs {globals} bind:value={globals.currentSheetIndex} />
 </div>
 
 <div
@@ -350,7 +341,7 @@
     Set --width and --height default values because if Table is in a Dialog, it
     will inherit the width and height of the dialog for table cells.
   -->
-  <Table bind:globals bind:table --width="auto" --height="auto" />
+  <Table {globals} bind:table --width="auto" --height="auto" />
 </div>
 
 <Dialog
@@ -387,7 +378,7 @@
         <p>Error {err}</p>
       {/await}
     </Details>
-    <SaveLoad bind:globals {imageData} />
+    <SaveLoad {globals} {imageData} />
   </div>
 </Dialog>
 
@@ -450,7 +441,7 @@
     </Details>
     <Details>
       {#snippet summary()}Settings{/snippet}
-      <Settings bind:globals />
+      <Settings {globals} />
     </Details>
   </div>
 </Dialog>
@@ -489,7 +480,7 @@
 {#if navigator.maxTouchPoints > 1}
   <!-- Must set top instead of bottom for correct placement on iOS -->
   <div class="keyboardbar" style:top="calc({visualBottom}px - 2.5em * 2)">
-    <FormulaBar bind:globals bind:editor={globals.elements.formulaBar} />
+    <FormulaBar {globals} bind:editor={globals.elements.formulaBar} />
     {#if showInputButtons}
       <div class="buttonbar" style:z-index={nextZIndex()}>
         {@render insertTextButton("=")}
diff --git a/src/Cell.svelte b/src/Cell.svelte
index b82e99f..eb6c3dd 100644
--- a/src/Cell.svelte
+++ b/src/Cell.svelte
@@ -152,7 +152,7 @@
 </style>
 
 <script>
-  let { cell, row, col, width, height, globals = $bindable() } = $props();
+  let { cell, row, col, width, height, globals } = $props();
   let selected = $derived(globals.selected);
   let value = $derived(cell.value);
   let errorText = $derived(cell.errorText);
diff --git a/src/SaveLoad.svelte b/src/SaveLoad.svelte
index fe7397e..89b0661 100644
--- a/src/SaveLoad.svelte
+++ b/src/SaveLoad.svelte
@@ -54,7 +54,7 @@
 
   import { compressText, decompressText } from "./lib/compress.js";
 
-  let { imageData, globals = $bindable() } = $props();
+  let { imageData, globals } = $props();
 
   let bottomText = $state("https://jstrieb.github.io/code-grid");
   let dataUrl = $derived(
@@ -71,9 +71,7 @@
     reader.addEventListener("load", () => {
       const data = reader.result.match(/,(.*)/)[1];
       decompressText(data)
-        .then((result) => {
-          globals = State.load(JSON.parse(result));
-        })
+        .then((result) => globals.load(JSON.parse(result)))
         .catch((e) => {
           console.error(e);
           /* TODO */
diff --git a/src/Settings.svelte b/src/Settings.svelte
index 7d1bf9e..627e3b6 100644
--- a/src/Settings.svelte
+++ b/src/Settings.svelte
@@ -10,7 +10,7 @@
   import Button from "./components/Button.svelte";
   import NumericInput from "./components/NumericInput.svelte";
 
-  let { globals = $bindable() } = $props();
+  let { globals } = $props();
 
   $effect(() => {
     document
diff --git a/src/Table.svelte b/src/Table.svelte
index 0b0064a..28b6c14 100644
--- a/src/Table.svelte
+++ b/src/Table.svelte
@@ -175,7 +175,7 @@
   import Button from "./components/Button.svelte";
   import NumericInput from "./components/NumericInput.svelte";
 
-  let { globals = $bindable(), table = $bindable() } = $props();
+  let { globals, table = $bindable() } = $props();
   let selected = $derived(globals.selected);
   let sheet = $derived(globals.currentSheet);
 
diff --git a/src/Tabs.svelte b/src/Tabs.svelte
index 1af041c..b40f023 100644
--- a/src/Tabs.svelte
+++ b/src/Tabs.svelte
@@ -86,7 +86,7 @@
 <script>
   import ContextMenu from "./components/ContextMenu.svelte";
 
-  let { globals = $bindable(), value = $bindable() } = $props();
+  let { globals, value = $bindable() } = $props();
   let tabs = $derived(globals.sheets.map((s) => s.name));
 
   let elements = $state(new Array(globals.sheets.length).fill());
diff --git a/src/classes.svelte.js b/src/classes.svelte.js
index ff714ba..ac6b41e 100644
--- a/src/classes.svelte.js
+++ b/src/classes.svelte.js
@@ -56,9 +56,17 @@ functions.crypto = async (ticker) => {
   });
   forceSave = $state(0);
 
-  static load(data) {
-    let result = new State(
-      data.sheets.map((sheet) => {
+  constructor(sheets, formulaCode) {
+    this.load({ sheets, formulaCode });
+  }
+
+  static loadNew(data) {
+    return new State(data.sheets, data.formulaCode);
+  }
+
+  load({ sheets, formulaCode }) {
+    Object.assign(this, {
+      sheets: sheets.map((sheet) => {
         let s = new Sheet(
           sheet.name,
           sheet.heights.length,
@@ -66,19 +74,12 @@ functions.crypto = async (ticker) => {
           (i, j) => sheet.cells[i][j].formula,
           (i, j) => sheet.cells[i][j].value,
         );
+        s.globals = this;
         s.widths = sheet.widths;
         s.heights = sheet.heights;
         return s;
       }),
-      data.formulaCode,
-    );
-    return result;
-  }
-
-  constructor(sheets, formulaCode) {
-    this.sheets = sheets;
-    this.sheets.forEach((sheet) => {
-      sheet.globals = this;
+      formulaCode: formulaCode,
     });
     if (formulaCode != null) {
       this.formulaCode = formulaCode;
diff --git a/test/sheet-and-formula.test.js b/test/sheet-and-formula.test.js
index 51588ba..2446b21 100644
--- a/test/sheet-and-formula.test.js
+++ b/test/sheet-and-formula.test.js
@@ -1,9 +1,9 @@
-import { Sheet, State } from "../src/classes.svelte.js";
+import { State } from "../src/classes.svelte.js";
 import { test, expect, beforeEach } from "vitest";
 import { evalCode, functions } from "../src/formula-functions.svelte.js";
 
 function createSheet(cells, formulaCode = "") {
-  return State.load({
+  return State.loadNew({
     sheets: [
       {
         name: "Sheet 1",
@@ -690,3 +690,25 @@ test("Binary literals", async () => {
     [8, -8, -9, 7, 9],
   ]);
 });
+
+test("State.load preserves elements", async () => {
+  const state = createSheet([["1", "2", "3"]]);
+  await expectSheet(state.currentSheet, [[1, 2, 3]]);
+  state.elements.formulaBar = document.createElement("textarea");
+  state.elements.formulaBar.setAttribute("data-testid", "shouldPreserve");
+
+  const savedState = createSheet([["4", "5", "6"]]);
+  await expectSheet(savedState.currentSheet, [[4, 5, 6]]);
+
+  const testFormulaCode = "functions.testFormulaCode = () => {}";
+  state.load({
+    sheets: savedState.sheets,
+    formulaCode: testFormulaCode,
+  });
+
+  await expectSheet(state.currentSheet, [[4, 5, 6]]);
+  expect(state.formulaCode).toBe(testFormulaCode);
+  expect(state.elements.formulaBar.getAttribute("data-testid")).toBe(
+    "shouldPreserve",
+  );
+});

From a879d41d18753f8830c5de016a02829596b310e2 Mon Sep 17 00:00:00 2001
From: Logan Snow <4197432+lsnow99@users.noreply.github.com>
Date: Fri, 30 Jan 2026 00:13:25 -0500
Subject: [PATCH 2/5] ...

---
 .prettierignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.prettierignore b/.prettierignore
index a1ca8a6..dbee2b2 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,5 @@
 *.md
 *.yml
 coverage
+Makefile
+.prettierignore

From 5cda4e26ae3b0149ba7322496087d0807b03b647 Mon Sep 17 00:00:00 2001
From: Logan Snow <4197432+lsnow99@users.noreply.github.com>
Date: Fri, 30 Jan 2026 00:19:33 -0500
Subject: [PATCH 3/5] close image modal after loading

---
 src/SaveLoad.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/SaveLoad.svelte b/src/SaveLoad.svelte
index 89b0661..119cf73 100644
--- a/src/SaveLoad.svelte
+++ b/src/SaveLoad.svelte
@@ -71,7 +71,10 @@
     reader.addEventListener("load", () => {
       const data = reader.result.match(/,(.*)/)[1];
       decompressText(data)
-        .then((result) => globals.load(JSON.parse(result)))
+        .then((result) => {
+          globals.load(JSON.parse(result));
+          globals.imageOpen = false;
+        })
         .catch((e) => {
           console.error(e);
           /* TODO */

From 15aac2de83dfc284a1a6c508cf38ba94a9be749a Mon Sep 17 00:00:00 2001
From: Logan Snow <4197432+lsnow99@users.noreply.github.com>
Date: Sun, 1 Feb 2026 22:21:27 -0500
Subject: [PATCH 4/5] switch to addSheet

---
 src/App.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 546ecce..49573ad 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -128,7 +128,11 @@
 
   let { urlData } = $props();
   let globals;
-  globals = load(urlData) ?? new State([new Sheet("Sheet 1", 10, 10)]);
+  globals = load(urlData);
+  if (globals == null) {
+    globals = new State([]);
+    globals.addSheet("Sheet 1", 10, 10);
+  }
   let table = $state();
   let startHeight = $state(0);
   let scrollArea = $state();
@@ -348,7 +352,7 @@
   bind:open={globals.editorOpen}
   style="display: flex; flex-direction: column; align-items: stretch; overflow: hidden; gap: 0.25em;"
 >
-  <CodeEditor numbers={true} bind:editor bind:code={globals.formulaCode} />
+  <CodeEditor numbers bind:editor bind:code={globals.formulaCode} />
   {#if codeError}
     <p style="white-space: pre; overflow-x: auto; flex-shrink: 0;">
       {codeError}

From ec72c469d1fad2ebdf0f3db215d0d8eeee54e9b1 Mon Sep 17 00:00:00 2001
From: Logan Snow <4197432+lsnow99@users.noreply.github.com>
Date: Sun, 1 Feb 2026 23:44:42 -0500
Subject: [PATCH 5/5] add better Sheet.load test

---
 src/App.svelte                 | 21 +------------------
 src/classes.svelte.js          | 24 ++++++++++++++++++++-
 test/sheet-and-formula.test.js | 38 +++++++++++++++++++++++++++++++++-
 3 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 49573ad..4b20057 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -194,26 +194,7 @@
     // Allow cell changes with get or update to trigger save. Those updates
     // change forceSave
     globals.forceSave;
-    save({
-      sheets: [
-        // Spreads necessary for reactivity
-        ...globals.sheets.map((sheet) => ({
-          name: sheet.name,
-          widths: [...sheet.widths],
-          heights: [...sheet.heights],
-          // TODO: Transpose for better compression
-          cells: [
-            ...sheet.cells.map((row) =>
-              row.map((cell) => ({
-                formula: cell.formula,
-                value: cell.get(),
-              })),
-            ),
-          ],
-        })),
-      ],
-      formulaCode: globals.formulaCode,
-    });
+    save(createSaveData(globals.sheets, globals.formulaCode));
   });
   $effect(() => {
     globals.currentSheetIndex;
diff --git a/src/classes.svelte.js b/src/classes.svelte.js
index ac6b41e..8a80c21 100644
--- a/src/classes.svelte.js
+++ b/src/classes.svelte.js
@@ -14,6 +14,29 @@ function minmax(min, x, max) {
   return Math.min(Math.max(x, min), max);
 }
 
+export function createSaveData(sheets, formulaCode) {
+  return {
+    sheets: [
+      // Spreads necessary for reactivity
+      ...sheets.map((sheet) => ({
+        name: sheet.name,
+        widths: [...sheet.widths],
+        heights: [...sheet.heights],
+        // TODO: Transpose for better compression
+        cells: [
+          ...sheet.cells.map((row) =>
+            row.map((cell) => ({
+              formula: cell.formula,
+              value: cell.get(),
+            })),
+          ),
+        ],
+      })),
+    ],
+    formulaCode: formulaCode,
+  };
+}
+
 export class State {
   sheets = $state([]);
   currentSheetIndex = $state(0);
@@ -79,7 +102,6 @@ functions.crypto = async (ticker) => {
         s.heights = sheet.heights;
         return s;
       }),
-      formulaCode: formulaCode,
     });
     if (formulaCode != null) {
       this.formulaCode = formulaCode;
diff --git a/test/sheet-and-formula.test.js b/test/sheet-and-formula.test.js
index 2446b21..8965e95 100644
--- a/test/sheet-and-formula.test.js
+++ b/test/sheet-and-formula.test.js
@@ -1,4 +1,4 @@
-import { State } from "../src/classes.svelte.js";
+import { createSaveData, State } from "../src/classes.svelte.js";
 import { test, expect, beforeEach } from "vitest";
 import { evalCode, functions } from "../src/formula-functions.svelte.js";
 
@@ -31,6 +31,20 @@ function expectSheet(sheet, cells) {
   );
 }
 
+function expectSheetElements(sheet, elements) {
+  return Promise.all(
+    elements
+      .map((row, i) =>
+        row.map((tagName, j) =>
+          expect
+            .poll(() => sheet.cells[i][j].element?.tagName)
+            .toEqual(tagName),
+        ),
+      )
+      .flat(),
+  );
+}
+
 const originalFunctions = { ...functions };
 beforeEach(() => {
   // Restore the imported, destructively-modified, global functions object so
@@ -712,3 +726,25 @@ test("State.load preserves elements", async () => {
     "shouldPreserve",
   );
 });
+
+test("State.load correctness", async () => {
+  const testFormulaCode = `functions.timesTwo = (x) => 2 * x;
+functions.H4 = function (x) { this.element = document.createElement("H4"); this.element.innerHTML = x; return x };
+`;
+  const state = createSheet(
+    [["1", "2", "=H4(RC0+timesTwo(RC[-1]))"]],
+    testFormulaCode,
+  );
+  await expectSheet(state.currentSheet, [[1, 2, 5]]);
+  await expectSheetElements(state.currentSheet, [[undefined, undefined, "H4"]]);
+
+  const snapshot = createSaveData([state.currentSheet], testFormulaCode);
+
+  state.currentSheet.cells[0][2].formula = "=7";
+
+  state.load(snapshot);
+
+  expect(state.formulaCode).toBe(testFormulaCode);
+  await expectSheet(state.currentSheet, [[1, 2, 5]]);
+  await expectSheetElements(state.currentSheet, [[undefined, undefined, "H4"]]);
+});