Refactor of globals and State

.prettierignore

@@ -1,3 +1,5 @@
 *.md
 *.yml
 coverage
+Makefile
+.prettierignore

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
 

src/App.svelte

@@ -127,9 +127,12 @@
   } 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);
+  if (globals == null) {
+    globals = new State([]);
+    globals.addSheet("Sheet 1", 10, 10);
+  }
   let table = $state();
   let startHeight = $state(0);
   let scrollArea = $state();
@@ -162,7 +165,7 @@
         return undefined;
       }
     }
-    return State.load(data);
+    return State.loadNew(data);
   }
 
   let dontSave = $state(false);
@@ -191,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;
@@ -309,15 +293,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 +302,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,14 +326,14 @@
     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
   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}
@@ -387,7 +363,7 @@
         <p>Error {err}</p>
       {/await}
     </Details>
-    <SaveLoad bind:globals {imageData} />
+    <SaveLoad {globals} {imageData} />
   </div>
 </Dialog>
 
@@ -450,7 +426,7 @@
     </Details>
     <Details>
       {#snippet summary()}Settings{/snippet}
-      <Settings bind:globals />
+      <Settings {globals} />
     </Details>
   </div>
 </Dialog>
@@ -489,7 +465,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("=")}

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);

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(
@@ -72,7 +72,8 @@
       const data = reader.result.match(/,(.*)/)[1];
       decompressText(data)
         .then((result) => {
-          globals = State.load(JSON.parse(result));
+          globals.load(JSON.parse(result));
+          globals.imageOpen = false;
         })
         .catch((e) => {
           console.error(e);

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

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);
 

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());

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);
@@ -56,29 +79,29 @@ 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,
           sheet.widths.length,
           (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;
     });
     if (formulaCode != null) {
       this.formulaCode = formulaCode;

test/sheet-and-formula.test.js

@@ -1,9 +1,9 @@
-import { Sheet, 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";
 
 function createSheet(cells, formulaCode = "") {
-  return State.load({
+  return State.loadNew({
     sheets: [
       {
         name: "Sheet 1",
@@ -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
@@ -690,3 +704,47 @@ 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",
+  );
+});
+
+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"]]);
+});