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.
mgreminger · Dec 19, 2024 · c744024 · c744024
1 parent f4bbf69
commit c744024
Show file tree

Hide file tree

Showing 21 changed files with 121 additions and 110 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → src/cells/MathCell.svelte.ts b/src/cells/MathCell.ts → 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 → src/cells/MathField.svelte.ts b/src/cells/MathField.ts → 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;