refactor: port PiecewiseCell to runes mode

src/App.svelte

@@ -6,7 +6,7 @@
   import TableCell from "./cells/TableCell";
   import DataTableCell, { type InterpolationFunction } from "./cells/DataTableCell";
   import PlotCell from "./cells/PlotCell";
-  import PiecewiseCell from "./cells/PiecewiseCell";
+  import PiecewiseCell from "./cells/PiecewiseCell.svelte";
   import SystemCell from "./cells/SystemCell.svelte";
   import FluidCell from "./cells/FluidCell";
   import { cells, title, results, resultsInvalid, system_results, sub_results,

src/Cell.svelte

@@ -20,7 +20,7 @@
   import TableCell from "./cells/TableCell";
   import DataTableCell from "./cells/DataTableCell";
   import DocumentationCell from "./cells/DocumentationCell";
-  import PiecewiseCell from "./cells/PiecewiseCell";
+  import PiecewiseCell from "./cells/PiecewiseCell.svelte";
   import SystemCell from "./cells/SystemCell.svelte";
   import DeletedCell from "./cells/DeletedCell";
   import InsertCell from "./cells/InsertCell";
@@ -298,8 +298,8 @@
       />
     {:else if cell instanceof PiecewiseCell}
       <PiecewiseCellElement
-        on:insertMathCellAfter={insertMathCellAfter}
-        on:insertInsertCellAfter={insertInsertCellAfter}
+        {insertMathCellAfter}
+        {insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         piecewiseCell={cell}

src/PiecewiseCell.svelte

@@ -2,14 +2,13 @@
   import {
     cells,
     activeCell,
-    mathCellChanged,
-    modifierKey
+    mathCellChanged
   } from "./stores";
 
-  import { onMount, tick, createEventDispatcher } from "svelte";
+  import { onMount, tick } from "svelte";
 
-  import type PiecewiseCell from "./cells/PiecewiseCell";
-  import type { MathField as MathFieldClass } from "./cells/MathField";
+  import type PiecewiseCell from "./cells/PiecewiseCell.svelte";
+  import type { MathField as MathFieldClass } from "./cells/MathField.svelte";
 
   import MathField from "./MathField.svelte";
 
@@ -19,11 +18,24 @@
   import RowDelete from "carbon-icons-svelte/lib/RowDelete.svelte";
   import IconButton from "./IconButton.svelte";
 
-  export let index: number;
-  export let piecewiseCell: PiecewiseCell;
+  interface Props {
+    index: number;
+    piecewiseCell: PiecewiseCell;
+    insertMathCellAfter: (arg: {detail: {index: number}}) => void;
+    insertInsertCellAfter: (arg: {detail: {index: number}}) => void;
+  }
+
+  let {
+    index,
+    piecewiseCell,
+    insertMathCellAfter,
+    insertInsertCellAfter
+  }: Props = $props();
 
   let containerDiv: HTMLDivElement;
 
+  let numRows = $derived(piecewiseCell.expressionFields.length);
+
   export function getMarkdown() {
     let result = `$$ ${piecewiseCell.parameterField.latex} = \\begin{cases} `;
 
@@ -38,10 +50,6 @@
     return result;
   }
 
-  const dispatch = createEventDispatcher<{
-    insertMathCellAfter: {index: number};
-    insertInsertCellAfter: {index: number};
-  }>();
 
   onMount(() => {
     if ($activeCell === index) {
@@ -94,11 +102,11 @@
     }
   }
 
-  $: if ($activeCell === index) {
+  $effect(() => {
+    if ($activeCell === index) {
       focus();
     }
-
-  $: numRows = piecewiseCell.expressionFields.length;
+  });
   
 </script>
 
@@ -157,8 +165,8 @@
     <MathField
       editable={true}
       update={(e) => parseLatex(e.latex, piecewiseCell.parameterField)}
-      shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-      modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+      shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+      modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
       mathField={piecewiseCell.parameterField}
       parsingError={piecewiseCell.parameterField.parsingError}
       bind:this={piecewiseCell.parameterField.element}
@@ -191,8 +199,8 @@
           editable={true}
           update={(e) => parseLatex(e.latex, mathField)}
           enter={() => handleEnter(i)}
-          shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-          modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+          shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+          modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
           mathField={mathField}
           parsingError={mathField.parsingError}
           bind:this={mathField.element}
@@ -230,8 +238,8 @@
                 editable={true}
                 update={(e) => parseLatex(e.latex, conditionMathField)}
                 enter={() => handleEnter(i)}
-                shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-                modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+                shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+                modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
                 mathField={conditionMathField}
                 parsingError={conditionMathField.parsingError}
                 bind:this={conditionMathField.element}

src/cells/Cells.ts

@@ -5,7 +5,7 @@ import PlotCell from "./PlotCell";
 import TableCell from "./TableCell";
 import DataTableCell from "./DataTableCell";
 import DocumentationCell from "./DocumentationCell";
-import PiecewiseCell from "./PiecewiseCell";
+import PiecewiseCell from "./PiecewiseCell.svelte";
 import SystemCell from "./SystemCell.svelte";
 import FluidCell from "./FluidCell";
 import type DeletedCell from "./DeletedCell";

src/cells/PiecewiseCell.ts → src/cells/PiecewiseCell.svelte.ts

@@ -3,20 +3,19 @@ import { MathField } from "./MathField.svelte";
 import type { Statement } from "../parser/types";
 
 export default class PiecewiseCell extends BaseCell {
-  parameterField: MathField;
-  expressionFields: MathField[];
-  conditionFields: MathField[];
+  parameterField: MathField = $state();
+  expressionFields: MathField[] = $state();
+  conditionFields: MathField[] = $state();
   piecewiseStatement: Statement | null;
 
   constructor (arg?: DatabasePiecewiseCell) {
+    super("piecewise", arg?.id);
     if (arg === undefined) {
-      super("piecewise");
       this.parameterField = new MathField('', 'parameter');
       this.expressionFields = [new MathField('', 'expression_no_blank'), new MathField('', 'expression_no_blank')];
       this.conditionFields = [new MathField('', 'condition'), ];
       this.piecewiseStatement = null;
     } else {
-      super("piecewise", arg.id);
       this.parameterField = new MathField(arg.parameterLatex, 'parameter');
       this.expressionFields = arg.expressionLatexs.map((latex) => new MathField(latex, "expression_no_blank"));
       this.conditionFields = arg.conditionLatexs.map((latex) => new MathField(latex, "condition"));

src/stores.ts

@@ -8,7 +8,7 @@ import DocumentationCell from './cells/DocumentationCell';
 import TableCell from './cells/TableCell';
 import DataTableCell from './cells/DataTableCell';
 import type {MathField} from './cells/MathField.svelte';
-import PiecewiseCell from './cells/PiecewiseCell';
+import PiecewiseCell from './cells/PiecewiseCell.svelte';
 import SystemCell from './cells/SystemCell.svelte';
 import FluidCell from './cells/FluidCell';
 import PlotCell from './cells/PlotCell';