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,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("=")}

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(
@@ -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 */

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

@@ -56,29 +56,30 @@ 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;
+      formulaCode: formulaCode,
     });
     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 { 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",
+  );
+});