From c7440247b01ad733a4bf51fcd3675bff088a3428 Mon Sep 17 00:00:00 2001
From: mgreminger <michael.greminger@gmail.com>
Date: Thu, 19 Dec 2024 14:24:19 -0600
Subject: [PATCH] refactor: port MathCell.svelte to runes mode

Brakes other things, all cell types will need to be ported before all tests will pass. Having non-runes and runes components access the same stores causes reactivity issues for the non-runes components.
---
 src/App.svelte                                |   4 +-
 src/Cell.svelte                               |  10 +-
 src/CellList.svelte                           |   2 +-
 src/DataTableCell.svelte                      |   2 +-
 src/GenerateCodeDialog.svelte                 |   7 +-
 src/MathCell.svelte                           | 154 +++++++++---------
 src/MathField.svelte                          |   2 +-
 src/cells/Cells.ts                            |   2 +-
 src/cells/DataTableCell.ts                    |   2 +-
 src/cells/FluidCell.ts                        |   2 +-
 src/cells/{MathCell.ts => MathCell.svelte.ts} |  10 +-
 .../{MathField.ts => MathField.svelte.ts}     |   8 +-
 src/cells/PiecewiseCell.ts                    |   2 +-
 src/cells/PlotCell.ts                         |   4 +-
 src/cells/SystemCell.ts                       |   2 +-
 src/cells/TableCell.ts                        |   2 +-
 src/keyboard/Keyboard.ts                      |   2 +-
 src/parser/LatexToSympy.ts                    |   2 +-
 src/stores.ts                                 |   4 +-
 src/types.ts                                  |   4 +-
 tsconfig.json                                 |   4 +-
 21 files changed, 121 insertions(+), 110 deletions(-)
 rename src/cells/{MathCell.ts => MathCell.svelte.ts} (82%)
 rename src/cells/{MathField.ts => MathField.svelte.ts} (90%)

diff --git a/src/App.svelte b/src/App.svelte
index 811bf3f3..f7d8d112 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,7 +2,7 @@
   import { onDestroy, onMount, tick, type ComponentEvents } from "svelte";
   import { type Cell, cellFactory } from "./cells/Cells";
   import { BaseCell } from "./cells/BaseCell";
-  import MathCell from "./cells/MathCell";
+  import MathCell from "./cells/MathCell.svelte";
   import TableCell from "./cells/TableCell";
   import DataTableCell, { type InterpolationFunction } from "./cells/DataTableCell";
   import PlotCell from "./cells/PlotCell";
@@ -24,7 +24,7 @@
   import { getHash, API_GET_PATH, API_SAVE_PATH } from "./database/utility";
   import type { SheetPostBody, History } from "./database/types";
   import CellList from "./CellList.svelte"; 
-  import type { MathField } from "./cells/MathField";
+  import type { MathField } from "./cells/MathField.svelte";
   import DocumentTitle from "./DocumentTitle.svelte";
   import UnitsDocumentation from "./UnitsDocumentation.svelte";
   import KeyboardShortcuts from "./KeyboardShortcuts.svelte";
diff --git a/src/Cell.svelte b/src/Cell.svelte
index ef33fb1a..2781d82f 100644
--- a/src/Cell.svelte
+++ b/src/Cell.svelte
@@ -15,7 +15,7 @@
   import DeletedCellElement from "./DeletedCell.svelte";
   import InsertCellElement from "./InsertCell.svelte";
 
-  import MathCell from "./cells/MathCell";
+  import MathCell from "./cells/MathCell.svelte";
   import PlotCell from "./cells/PlotCell";
   import TableCell from "./cells/TableCell";
   import DataTableCell from "./cells/DataTableCell";
@@ -255,10 +255,10 @@
   >
     {#if cell instanceof MathCell}
       <MathCellElement
-        on:updateNumberFormat={updateNumberFormat}
-        on:generateCode={generateCode}
-        on:insertMathCellAfter={insertMathCellAfter}
-        on:insertInsertCellAfter={insertInsertCellAfter}
+        {updateNumberFormat}
+        {generateCode}
+        {insertMathCellAfter}
+        {insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         mathCell={cell}
diff --git a/src/CellList.svelte b/src/CellList.svelte
index df7bc336..de051aa4 100644
--- a/src/CellList.svelte
+++ b/src/CellList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ModalInfo } from "./types";
-  import MathCell from "./cells/MathCell";
+  import MathCell from "./cells/MathCell.svelte";
   import type { MathCellConfig } from "./sheet/Sheet";
   import { cells, results, system_results, activeCell, mathCellChanged } from "./stores";
   import Cell from "./Cell.svelte";
diff --git a/src/DataTableCell.svelte b/src/DataTableCell.svelte
index db75962e..bb1541d2 100644
--- a/src/DataTableCell.svelte
+++ b/src/DataTableCell.svelte
@@ -21,7 +21,7 @@
   import { convertArrayUnits, unitsEquivalent, unitsValid } from "./utility.js";
 
   import type DataTableCell from "./cells/DataTableCell";
-  import type { MathField as MathFieldClass } from "./cells/MathField";
+  import type { MathField as MathFieldClass } from "./cells/MathField.svelte";
 
   import MathField from "./MathField.svelte";
   import DataTableInput from "./DataTableInput.svelte";
diff --git a/src/GenerateCodeDialog.svelte b/src/GenerateCodeDialog.svelte
index 0ad37db1..db2cf6db 100644
--- a/src/GenerateCodeDialog.svelte
+++ b/src/GenerateCodeDialog.svelte
@@ -4,8 +4,9 @@
   import { results, cells, mathCellChanged } from './stores';
   import type { CodeFunctionQueryStatement } from './parser/types';
   import type { Cell } from './cells/Cells';
-  import MathCell from './cells/MathCell';
-  import { type FiniteImagResult, type Result, type MatrixResult, isMatrixResult } from './resultTypes';
+  import MathCell from './cells/MathCell.svelte';
+  import { type FiniteImagResult, type Result, type MatrixResult, isMatrixResult,
+           isDataTableResult } from './resultTypes';
   import { PYTHON_RESERVED } from './utility';
   import { InlineLoading, CodeSnippet } from 'carbon-components-svelte';
   import Information from "carbon-icons-svelte/lib/Information.svelte";
@@ -225,7 +226,7 @@ ${parameterNames.map(parameterConversionMap).filter(value => value !== "").map((
 
   $: {
       const tempResult = $results[index];    
-      if (tempResult && !(tempResult instanceof Array)) {
+      if (tempResult && !(tempResult instanceof Array) && !isDataTableResult(tempResult)) {
       result = tempResult;
     } else {
       result = null;
diff --git a/src/MathCell.svelte b/src/MathCell.svelte
index f6c2721a..90dea8d3 100644
--- a/src/MathCell.svelte
+++ b/src/MathCell.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { onMount, createEventDispatcher, SvelteComponent } from "svelte";
+  import { onMount, untrack } from "svelte";
   import { bignumber, format, unaryMinus, type BigNumber, type FormatOptions } from "mathjs";
   import { cells, results, sub_results, resultsInvalid, activeCell, mathCellChanged, config } from "./stores";
   import { isFiniteImagResult, type Result, type FiniteImagResult,
            type PlotResult, type MatrixResult, isMatrixResult, 
            type DataTableResult, 
            isDataTableResult} from "./resultTypes";
-           import type { CodeFunctionQueryStatement, QueryStatement, SubQueryStatement } from "./parser/types";
+  import type { Statement, CodeFunctionQueryStatement, QueryStatement, SubQueryStatement } from "./parser/types";
   import { convertUnits, unitsValid } from "./utility";
   import type { MathCellConfig } from "./sheet/Sheet";
-  import type MathCell from "./cells/MathCell";
+  import type MathCell from "./cells/MathCell.svelte";
   import PlotCell from "./cells/PlotCell";
   import MathField from "./MathField.svelte";
   import IconButton from "./IconButton.svelte";
@@ -21,18 +21,32 @@
   import LogoPython from "carbon-icons-svelte/lib/LogoPython.svelte";
   import { applyEdits, createSubQuery, type Replacement } from "./parser/utility";
 
-  export let index: number;
-  export let mathCell: MathCell;
+  interface Props {
+    index: number;
+    mathCell: MathCell;
+    updateNumberFormat: (arg: {detail: {mathCell: MathCell, setNumberConfig: (input: MathCellConfig) => void}}) => void;
+    generateCode: (arg: {detail: {index: number}}) => void;
+    insertMathCellAfter: (arg: {detail: {index: number}}) => void;
+    insertInsertCellAfter: (arg: {detail: {index: number}}) => void;
+  }
 
-  let result: (Result | FiniteImagResult | MatrixResult | DataTableResult | PlotResult[] | null) = null;
+  let {
+      index,
+      mathCell,
+      updateNumberFormat,
+      generateCode,
+      insertMathCellAfter,
+      insertInsertCellAfter
+    }: Props = $props(); 
 
-  let numberConfig = getNumberConfig();
+  let result = $derived($results[index]);
+  let numberConfig = $derived(getNumberConfig());
 
-  let error = "";
-  let resultLatex = "";
-  let resultUnits = "";
-  let resultUnitsLatex = "";
-  let numericResult = false;
+  let error = $state("");
+  let resultLatex = $state("");
+  let resultUnits = $state("");
+  let resultUnitsLatex = $state("");
+  let numericResult = $state(false);
 
   export function getMarkdown() {
     const queryStatement = Boolean(mathCell.mathField?.statement?.type === "query");
@@ -49,13 +63,6 @@
     return `$$ ${mathCell.mathField.latex} ${result} ${errorMessage} $$\n\n`;
   }
 
-  const dispatch = createEventDispatcher<{
-    updateNumberFormat: {mathCell: MathCell, setNumberConfig: (input: MathCellConfig) => void};
-    generateCode: {index: number};
-    insertMathCellAfter: {index: number};
-    insertInsertCellAfter: {index: number};
-  }>();
-
   export function setNumberConfig(mathCellConfig: MathCellConfig) {
     mathCell.config = mathCellConfig;
   }
@@ -65,11 +72,11 @@
   }
 
   function handleUpdateNumberFormat() {
-    dispatch("updateNumberFormat", { mathCell: mathCell, setNumberConfig: setNumberConfig });
+    updateNumberFormat({detail: { mathCell: mathCell, setNumberConfig: setNumberConfig }});
   }
 
   function handleGenerateCode() {
-    dispatch("generateCode", {index: index});
+    generateCode({detail: {index: index}});
   }
 
   onMount( () => {
@@ -132,12 +139,15 @@
   function getLatexResult(statement: QueryStatement | CodeFunctionQueryStatement | SubQueryStatement, 
                           result: Result | FiniteImagResult | MatrixResult,
                           numberConfig: MathCellConfig) {
+    let error = "";
+    let numericResult = false;
+    let resultLatex = "";
+    let resultUnits = "";
+    let resultUnitsLatex = "";
+    let unitsMismatchErrorMessage = "";
+
     if (!isMatrixResult(result)) {
-      let numericResult = result.numeric;
-      let resultLatex = "";
-      let resultUnits = "";
-      let resultUnitsLatex = "";
-      let unitsMismatchErrorMessage: string = "";
+      numericResult = result.numeric;
 
       if (!unitsValid(result.units)) {
         return {
@@ -245,11 +255,11 @@
       resultLatex = String.raw`\begin{bmatrix} ${latexRows.map(row => row.join(' & ')).join(' \\\\ ')} \end{bmatrix}`;
       
       return {
-        error: error,
-        resultLatex: resultLatex,
-        resultUnits: resultUnits,
-        resultUnitsLatex: resultUnitsLatex,
-        numericResult: numericResult
+        error,
+        resultLatex,
+        resultUnits,
+        resultUnitsLatex,
+        numericResult
       };
     }
   }
@@ -370,65 +380,63 @@
     }
   }
 
-  $: if ($activeCell === index) {
+  $effect(() => {
+    if ($activeCell === index) {
       focus();
     }
+  }); 
+
+  $effect(() => {
+    if(mathCell.mathField.statement) {
+      if(("isRange" in mathCell.mathField.statement && mathCell.mathField.statement.isRange) ||
+        mathCell.mathField.statement.type === "scatterQuery" ||
+        mathCell.mathField.statement.type ==="parametricRange"
+        ) {
+        // user entered range into a math cell, turn this cell into a plot cell
+        (async () => {
+          await PlotCell.init();
+
+          // make sure situation hasn't change after plotly is loaded
+          if (mathCell.mathField.statement &&
+              (("isRange" in mathCell.mathField.statement && 
+              mathCell.mathField.statement.isRange) ||
+              mathCell.mathField.statement.type === "scatterQuery" ||
+              mathCell.mathField.statement.type === "parametricRange")
+            ) {
+            $cells = [...$cells.slice(0,index), new PlotCell(mathCell), ...$cells.slice(index+1)];
+          }
+        })();
+      }
+    }
+  });
 
-  $: if(mathCell.mathField.statement) {
-    if(("isRange" in mathCell.mathField.statement && mathCell.mathField.statement.isRange) ||
-       mathCell.mathField.statement.type === "scatterQuery" ||
-       mathCell.mathField.statement.type ==="parametricRange"
-      ) {
-      // user entered range into a math cell, turn this cell into a plot cell
-      (async () => {
-        await PlotCell.init();
-
-        // make sure situation hasn't change after plotly is loaded
-        if (mathCell.mathField.statement &&
-            (("isRange" in mathCell.mathField.statement && 
-            mathCell.mathField.statement.isRange) ||
-            mathCell.mathField.statement.type === "scatterQuery" ||
-            mathCell.mathField.statement.type === "parametricRange")
-           ) {
-          $cells = [...$cells.slice(0,index), new PlotCell(mathCell), ...$cells.slice(index+1)];
-        }
-      })();
-   }
-  }
-
-  $: if (mathCell.config || $config.mathCellConfig) {
-    numberConfig = getNumberConfig();;
-  }
-
-  $: result = $results[index];
 
   // format output and perform unit conversions to user specified units if necessary
-  $: if (result && !(result instanceof Array) && !isDataTableResult(result) &&
-         mathCell.mathField.statement &&
-         mathCell.mathField.statement.type === "query") {
-      const statement = mathCell.mathField.statement;
+  $effect(() => {
+    const statement = mathCell.mathField.statement;
+    
+    if (result && !(result instanceof Array) && !isDataTableResult(result) &&
+         statement && statement.type === "query") {
       if (statement.isRange === false && statement.isDataTableQuery === false) { 
         ( {error, resultLatex, resultUnits, resultUnitsLatex, numericResult} = getLatexResult(statement, result, numberConfig) );
-        if (error) {
+        if (untrack(() => error)) {
           resultLatex = "";
           resultUnitsLatex = "";
         }
 
         if (numberConfig.showIntermediateResults && "subQueries" in statement) {
-          const intermediateResult = getIntermediateLatex(mathCell.mathField.latex,
-                                                          statement, $sub_results);
+          const intermediateResult = getIntermediateLatex(mathCell.mathField.latex, statement, $sub_results);
           if (intermediateResult) {
-            resultLatex = `${intermediateResult} = ${resultLatex}`;
+            resultLatex = `${intermediateResult} = ${untrack(() => resultLatex)}`;
           }
         }
 
         if (statement.units) {
-          resultLatex = "=" + resultLatex;
+          resultLatex = "=" + untrack(() => resultLatex);
         }
       }
     }
-
-
+  });
 </script>
 
 <style>
@@ -467,9 +475,9 @@
   <MathField
     editable={true}
     update={(e) => parseLatex(e.latex, index)}
-    enter={() => dispatch("insertMathCellAfter", {index: index})}
-    shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-    modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+    enter={() => insertMathCellAfter({detail: {index: index}})}
+    shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+    modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
     mathField={mathCell.mathField}
     parsingError={mathCell.mathField.parsingError}
     bind:this={mathCell.mathField.element}
diff --git a/src/MathField.svelte b/src/MathField.svelte
index a8cfe1a2..c12a46a6 100644
--- a/src/MathField.svelte
+++ b/src/MathField.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { modifierKey, activeMathField, resultsInvalid } from "./stores";
-  import type { MathField } from "./cells/MathField";
+  import type { MathField } from "./cells/MathField.svelte";
 
   import type { MathfieldElement } from "mathlive";
   import { INLINE_SHORTCUTS, MAX_MATRIX_COLS } from "./constants";
diff --git a/src/cells/Cells.ts b/src/cells/Cells.ts
index fb595740..bd5794b9 100644
--- a/src/cells/Cells.ts
+++ b/src/cells/Cells.ts
@@ -1,6 +1,6 @@
 import type { BaseCell, DatabaseCell } from "./BaseCell";
 import type { Config } from "../sheet/Sheet";
-import MathCell from "./MathCell";
+import MathCell from "./MathCell.svelte";
 import PlotCell from "./PlotCell";
 import TableCell from "./TableCell";
 import DataTableCell from "./DataTableCell";
diff --git a/src/cells/DataTableCell.ts b/src/cells/DataTableCell.ts
index d045d507..7a62035b 100644
--- a/src/cells/DataTableCell.ts
+++ b/src/cells/DataTableCell.ts
@@ -1,5 +1,5 @@
 import { BaseCell, type DatabaseDataTableCell } from "./BaseCell";
-import { MathField } from "./MathField";
+import { MathField } from "./MathField.svelte";
 import type { Statement, UnitsStatement } from "../parser/types";
 import QuickLRU from "quick-lru";
 import { arraysEqual, getArraySI } from "../utility";
diff --git a/src/cells/FluidCell.ts b/src/cells/FluidCell.ts
index 21c834fa..cbaa141b 100644
--- a/src/cells/FluidCell.ts
+++ b/src/cells/FluidCell.ts
@@ -1,5 +1,5 @@
 import { BaseCell, type DatabaseFluidCell } from "./BaseCell";
-import { MathField } from "./MathField";
+import { MathField } from "./MathField.svelte";
 import { unit } from 'mathjs';
 import { type FluidConfig, type Config, getDefaultFluidConfig } from "../sheet/Sheet";
 import type { AssignmentStatement } from "../parser/types";
diff --git a/src/cells/MathCell.ts b/src/cells/MathCell.svelte.ts
similarity index 82%
rename from src/cells/MathCell.ts
rename to src/cells/MathCell.svelte.ts
index bd9cd627..27e3031c 100644
--- a/src/cells/MathCell.ts
+++ b/src/cells/MathCell.svelte.ts
@@ -1,18 +1,18 @@
 import type { MathCellConfig } from "../sheet/Sheet";
 import { BaseCell, type DatabaseMathCell } from "./BaseCell";
-import { MathField } from "./MathField";
+import { MathField } from "./MathField.svelte";
 
 export default class MathCell extends BaseCell {
-  mathField: MathField;
-  config: MathCellConfig | null;
+  mathField: MathField = $state();
+  config: MathCellConfig | null = $state();
 
   constructor (arg?: DatabaseMathCell) {
+    super("math", arg?.id);
     if (arg === undefined) {
-      super("math");
       this.mathField = new MathField("");
       this.config = null;
     } else {
-      super("math", arg.id);
+      
       this.mathField = new MathField(arg.latex);
       if (arg.config) {
         this.config = arg.config;
diff --git a/src/cells/MathField.ts b/src/cells/MathField.svelte.ts
similarity index 90%
rename from src/cells/MathField.ts
rename to src/cells/MathField.svelte.ts
index 6cb293ee..35f521fd 100644
--- a/src/cells/MathField.ts
+++ b/src/cells/MathField.svelte.ts
@@ -5,13 +5,13 @@ import type { Statement, FieldTypes, DataTableInfo } from "../parser/types";
 
 
 export class MathField {
-  latex: string;
+  latex: string = $state();
   type: FieldTypes;
   id: number;
   static nextId = 0; 
-  parsingError = true;
-  parsingErrorMessage = "Invalid Syntax";
-  statement: Statement | null = null;
+  parsingError = $state(true);
+  parsingErrorMessage = $state("Invalid Syntax");
+  statement: Statement | null = $state(null);
   element: MathFieldElement | null = null;
   pendingNewLatex = false;
   newLatex:string;
diff --git a/src/cells/PiecewiseCell.ts b/src/cells/PiecewiseCell.ts
index 74fbd4f3..a4eddf69 100644
--- a/src/cells/PiecewiseCell.ts
+++ b/src/cells/PiecewiseCell.ts
@@ -1,5 +1,5 @@
 import { BaseCell, type DatabasePiecewiseCell } from "./BaseCell";
-import { MathField } from "./MathField";
+import { MathField } from "./MathField.svelte";
 import type { Statement } from "../parser/types";
 
 export default class PiecewiseCell extends BaseCell {
diff --git a/src/cells/PlotCell.ts b/src/cells/PlotCell.ts
index e1d8b281..33962280 100644
--- a/src/cells/PlotCell.ts
+++ b/src/cells/PlotCell.ts
@@ -1,6 +1,6 @@
 import { BaseCell, type DatabasePlotCell } from "./BaseCell";
-import MathCell from "./MathCell";
-import { MathField } from "./MathField";
+import MathCell from "./MathCell.svelte";
+import { MathField } from "./MathField.svelte";
 
 type Plotly = typeof import("plotly.js-basic-dist");
 
diff --git a/src/cells/SystemCell.ts b/src/cells/SystemCell.ts
index 83a7e9c6..558db53e 100644
--- a/src/cells/SystemCell.ts
+++ b/src/cells/SystemCell.ts
@@ -1,5 +1,5 @@
 import { BaseCell, type DatabaseSystemCell } from "./BaseCell";
-import { MathField } from "./MathField";
+import { MathField } from "./MathField.svelte";
 import type { EqualityStatement, GuessAssignmentStatement } from "../parser/types";
 
 export type SystemDefinition = ExactSystemDefinition | NumericalSystemDefinition;
diff --git a/src/cells/TableCell.ts b/src/cells/TableCell.ts
index 82e4080b..c65790e8 100644
--- a/src/cells/TableCell.ts
+++ b/src/cells/TableCell.ts
@@ -1,5 +1,5 @@
 import { BaseCell, type DatabaseTableCell } from "./BaseCell";
-import { MathField } from "./MathField";
+import { MathField } from "./MathField.svelte";
 import type { Statement } from "../parser/types";
 import QuickLRU from "quick-lru";
 
diff --git a/src/keyboard/Keyboard.ts b/src/keyboard/Keyboard.ts
index 4da0a151..8ba49eaf 100644
--- a/src/keyboard/Keyboard.ts
+++ b/src/keyboard/Keyboard.ts
@@ -1,4 +1,4 @@
-import type {MathField} from '../cells/MathField';
+import type {MathField} from '../cells/MathField.svelte';
 import { get } from 'svelte/store';
 import { onMobile } from '../stores';
 
diff --git a/src/parser/LatexToSympy.ts b/src/parser/LatexToSympy.ts
index de31d231..072e9b20 100644
--- a/src/parser/LatexToSympy.ts
+++ b/src/parser/LatexToSympy.ts
@@ -51,7 +51,7 @@ import {
 } from "./LatexParser";
 import { getBlankMatrixLatex } from "../utility";
 
-import { MathField } from "../cells/MathField";
+import { MathField } from "../cells/MathField.svelte";
 
 
 type ParsingResult = {
diff --git a/src/stores.ts b/src/stores.ts
index 7ed20a17..61867422 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -3,11 +3,11 @@ import { get as idbGet } from 'idb-keyval';
 
 import type { Cell } from './cells/Cells';
 import { BaseCell, type CellTypes } from './cells/BaseCell';
-import MathCell from './cells/MathCell';
+import MathCell from './cells/MathCell.svelte';
 import DocumentationCell from './cells/DocumentationCell';
 import TableCell from './cells/TableCell';
 import DataTableCell from './cells/DataTableCell';
-import type {MathField} from './cells/MathField';
+import type {MathField} from './cells/MathField.svelte';
 import PiecewiseCell from './cells/PiecewiseCell';
 import SystemCell from './cells/SystemCell';
 import FluidCell from './cells/FluidCell';
diff --git a/src/types.ts b/src/types.ts
index 500ad861..d789dd46 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,8 +1,8 @@
-import type MathCell from "./cells/MathCell";
+import type MathCell from "./cells/MathCell.svelte";
 import type { SystemDefinition } from "./cells/SystemCell";
 import type { FluidFunction } from "./cells/FluidCell";
 import type { Statement, SubQueryStatement } from "./parser/types";
-import type { MathField } from "./cells/MathField";
+import type { MathField } from "./cells/MathField.svelte";
 import type { CustomBaseUnits, MathCellConfig } from "./sheet/Sheet";
 import type { InterpolationFunction } from "./cells/DataTableCell";
 
diff --git a/tsconfig.json b/tsconfig.json
index 4ab794d0..3cb41dc9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
     "strict": false,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
     "types": ["@types/wicg-file-system-access"],
     "lib": [
       "ES2021",