Merge katex and page evaluation in; resolve conflicts

package.json

@@ -12,7 +12,13 @@
   },
   "dependencies": {
     "@vuetify/vite-plugin": "1.0.0-alpha.10",
+    "@types/katex": "^0.14.0",
+    "@types/uuid": "^8.3.4",
+    "dependency-graph": "^0.11.0",
     "install": "^0.13.0",
+    "katex": "^0.15.3",
+    "mathjs": "^10.4.3",
+    "uuid": "^8.3.2",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",
     "vuetify": "3.0.0-beta.0",

pnpm-lock.yaml

@@ -3,14 +3,20 @@ lockfileVersion: 5.3
 specifiers:
   '@auth0/auth0-vue': ^1.0.0
   '@braks/revue-draggable': ^0.4.2
+  '@types/katex': ^0.14.0
+  '@types/uuid': ^8.3.4
   '@typescript-eslint/eslint-plugin': ^5.18.0
   '@typescript-eslint/parser': ^5.18.0
   '@vitejs/plugin-vue': ^2.3.1
   '@volar/vue-language-service': ^0.33.9
   '@vuetify/vite-plugin': 1.0.0-alpha.10
+  dependency-graph: ^0.11.0
   eslint: ^8.13.0
   install: ^0.13.0
+  katex: ^0.15.3
+  mathjs: ^10.4.3
   typescript: ^4.5.4
+  uuid: ^8.3.2
   vite: ^2.9.0
   vue: ^3.2.25
   vue-router: ^4.0.14
@@ -19,8 +25,14 @@ specifiers:
 
 dependencies:
   '@auth0/auth0-vue': 1.0.0_vue-router@4.0.14
+  '@types/katex': 0.14.0
+  '@types/uuid': 8.3.4
   '@vuetify/vite-plugin': 1.0.0-alpha.10_vite@2.9.1+vuetify@3.0.0-beta.0
+  dependency-graph: 0.11.0
   install: 0.13.0
+  katex: 0.15.3
+  mathjs: 10.4.3
+  uuid: 8.3.2
   vue: 3.2.31
   vue-router: 4.0.14_vue@3.2.31
   vuetify: 3.0.0-beta.0_vue@3.2.31
@@ -89,6 +101,13 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  /@babel/runtime/7.17.9:
+    resolution: {integrity: sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.9
+    dev: false
+
   /@babel/types/7.17.0:
     resolution: {integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==}
     engines: {node: '>=6.9.0'}
@@ -317,6 +336,10 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
+  /@types/katex/0.14.0:
+    resolution: {integrity: sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==}
+    dev: false
+
   /@types/minimatch/3.0.5:
     resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
     dev: true
@@ -337,6 +360,10 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
 
+  /@types/uuid/8.3.4:
+    resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
+    dev: false
+
   /@types/vfile-message/2.0.0:
     resolution: {integrity: sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw==}
     deprecated: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
@@ -1053,10 +1080,19 @@ packages:
     resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
     dev: true
 
+  /commander/8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+    dev: false
+
   /commondir/1.0.1:
     resolution: {integrity: sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=}
     dev: false
 
+  /complex.js/2.1.0:
+    resolution: {integrity: sha512-RdcrDz7YynXp/YXGwXIZ4MtmxXXniT5WmLFRX93cuXUX+0geWAqB8l1BoLXF+3BkzviVzHlpw27P9ow7MvlcmA==}
+    dev: false
+
   /concat-map/0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
     dev: true
@@ -1162,6 +1198,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /decimal.js/10.3.1:
+    resolution: {integrity: sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==}
+    dev: false
+
   /decompress-response/3.3.0:
     resolution: {integrity: sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=}
     engines: {node: '>=4'}
@@ -1205,6 +1245,11 @@ packages:
       slash: 3.0.0
     dev: true
 
+  /dependency-graph/0.11.0:
+    resolution: {integrity: sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1509,6 +1554,10 @@ packages:
       esbuild-windows-arm64: 0.14.34
     dev: true
 
+  /escape-latex/1.2.0:
+    resolution: {integrity: sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==}
+    dev: false
+
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
     engines: {node: '>=0.8.0'}
@@ -1761,6 +1810,10 @@ packages:
     engines: {node: '>=0.4.x'}
     dev: true
 
+  /fraction.js/4.2.0:
+    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+    dev: false
+
   /fs.realpath/1.0.0:
     resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
     dev: true
@@ -2204,6 +2257,10 @@ packages:
     resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=}
     dev: true
 
+  /javascript-natural-sort/0.7.1:
+    resolution: {integrity: sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k=}
+    dev: false
+
   /js-stringify/1.0.2:
     resolution: {integrity: sha1-Fzb939lyTyijaCrcYjCufk6Weds=}
     dev: true
@@ -2262,6 +2319,13 @@ packages:
       promise: 7.3.1
     dev: true
 
+  /katex/0.15.3:
+    resolution: {integrity: sha512-Al6V7RJsmjklT9QItyHWGaQCt+NYTle1bZwB1e9MR/tLoIT1MXaHy9UpfGSB7eaqDgjjqqRxQOaQGrALCrEyBQ==}
+    hasBin: true
+    dependencies:
+      commander: 8.3.0
+    dev: false
+
   /keyv/3.1.0:
     resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==}
     dependencies:
@@ -2399,6 +2463,22 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /mathjs/10.4.3:
+    resolution: {integrity: sha512-C50lWorCOplBec9Ik5fzhHuOx4G4+mtdz3r1G2I1/r8yj+CpYFXLXNqTdg59oKmIF1tKcIzpxlC4s2dGL7f3pg==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    dependencies:
+      '@babel/runtime': 7.17.9
+      complex.js: 2.1.0
+      decimal.js: 10.3.1
+      escape-latex: 1.2.0
+      fraction.js: 4.2.0
+      javascript-natural-sort: 0.7.1
+      seedrandom: 3.0.5
+      tiny-emitter: 2.1.0
+      typed-function: 2.1.0
+    dev: false
+
   /meow/5.0.0:
     resolution: {integrity: sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==}
     engines: {node: '>=6'}
@@ -2944,6 +3024,10 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /regenerator-runtime/0.13.9:
+    resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
+    dev: false
+
   /regexpp/3.2.0:
     resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
     engines: {node: '>=8'}
@@ -3047,6 +3131,10 @@ packages:
       suf-regex: 0.3.4
     dev: true
 
+  /seedrandom/3.0.5:
+    resolution: {integrity: sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==}
+    dev: false
+
   /semver-diff/2.1.0:
     resolution: {integrity: sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=}
     engines: {node: '>=0.10.0'}
@@ -3293,6 +3381,10 @@ packages:
     resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=}
     dev: true
 
+  /tiny-emitter/2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
+    dev: false
+
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=}
     engines: {node: '>=4'}
@@ -3388,6 +3480,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /typed-function/2.1.0:
+    resolution: {integrity: sha512-bctQIOqx2iVbWGDGPWwIm18QScpu2XRmkC19D8rQGFsjKSgteq/o1hTZvIG/wuDq8fanpBDrLkLq+aEN/6y5XQ==}
+    engines: {node: '>= 10'}
+    dev: false
+
   /typedarray/0.0.6:
     resolution: {integrity: sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=}
     dev: true
@@ -3547,6 +3644,11 @@ packages:
     resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=}
     dev: true
 
+  /uuid/8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+    dev: false
+
   /v8-compile-cache/2.3.0:
     resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}
     dev: true

src/App.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import Home from './components/Home.vue'
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import HelloWorld from './components/HelloWorld.vue'
+import { MathStatement } from './support/parse'
+import { MathPage } from './support/page'
+(window as any).Stmt = MathStatement
+;(window as any).Pg = MathPage
 </script>
 
 <template>

src/support/page.ts

@@ -0,0 +1,105 @@
+import {MathStatement} from './parse'
+import * as math from 'mathjs'
+import {DepGraph} from 'dependency-graph'
+import { v4 as uuidv4 } from 'uuid'
+import {EvaluationResult, StatementID, VariableName} from '../types'
+
+/**
+ * Wrapper for a page containing multiple interrelated mathematical statements.
+ */
+export class MathPage {
+    /** The statements on the page. */
+    protected statements: Record<StatementID, MathStatement> = {}
+
+    constructor(
+        /** Unique page ID. */
+        public readonly id: string,
+    ) {}
+
+    /** Add a statement to this page. */
+    addStatement(statement: MathStatement): this {
+        this.statements[statement.id] = statement
+        return this
+    }
+
+    /** Parse the math expression and add it to the page as a statement. */
+    addRaw(statement: string): this {
+        return this.addStatement(new MathStatement(uuidv4() as StatementID, statement))
+    }
+
+    /** Get all symbols referenced by statements on this page. */
+    symbols(): math.SymbolNode[] {
+        return Object.values(this.statements)
+            .map(x => x.symbols())
+            .reduce((carry, current) => current.concat(carry), [])
+    }
+
+    /** Get all symbols defined on this page. */
+    defines(): math.SymbolNode[] {
+        return Object.values(this.statements)
+            .map(x => x.defines())
+            .reduce((carry, current) => current.concat(carry), [])
+    }
+
+    /** Get all symbols used on this page. */
+    uses(): math.SymbolNode[] {
+        return Object.values(this.statements)
+            .map(x => x.uses())
+            .reduce((carry, current) => current.concat(carry), [])
+    }
+
+    /** Get a mapping of symbol names to the statements where they are defined. */
+    definers(): Record<VariableName, MathStatement> {
+        const definers: Record<VariableName, MathStatement> = {}
+
+        for ( const statement of Object.values(this.statements) ) {
+            for ( const symbol of statement.defines() ) {
+                definers[symbol.name as VariableName] = statement
+            }
+        }
+
+        return definers
+    }
+
+    /** Get the dependency graph of variable declarations between statements on this page. */
+    dependencies(): DepGraph<MathStatement> {
+        const graph = new DepGraph<MathStatement>()
+        const defined: Record<VariableName, MathStatement> = this.definers()
+
+        for ( const statement of Object.values(this.statements) ) {
+            graph.addNode(statement.id, statement)
+        }
+
+        for ( const statement of Object.values(this.statements) ) {
+            for ( const symbol of statement.uses() ) {
+                const provider = defined[symbol.name as VariableName]
+                if ( !provider ) {
+                    throw new Error('No provider for undefined symbol: ' + symbol.name)
+                }
+
+                graph.addDependency(statement.id, provider.id)
+            }
+        }
+
+        return graph
+    }
+
+    /** Evaluate the current state of the page and get the result. */
+    evaluate(): EvaluationResult {
+        const evaluations: Record<StatementID, any> = {}
+        const scope: Record<VariableName, any> = {}
+        const graph = this.dependencies()
+
+        for ( const node of graph.overallOrder() ) {
+            const stmt = this.statements[node as StatementID]
+            evaluations[stmt.id] = stmt.parse()
+                .compile()
+                .evaluate(scope)
+        }
+
+        return {
+            variables: scope,
+            statements: evaluations,
+        }
+    }
+}

src/support/parse.ts

@@ -0,0 +1,309 @@
+import * as math from 'mathjs'
+import katex from 'katex'
+import {HTMLString, LaTeXString, StatementID} from '../types'
+
+/** Base class for walks over MathNode trees. */
+export abstract class MathNodeWalk<TReturn> {
+    walk(node: math.MathNode): TReturn {
+        if ( math.isAccessorNode(node) ) {
+            return this.walkAccessorNode(node)
+        } else if ( math.isArrayNode(node) ) {
+            return this.walkArrayNode(node)
+        } else if ( math.isAssignmentNode(node) ) {
+            return this.walkAssignmentNode(node)
+        } else if ( math.isBlockNode(node) ) {
+            return this.walkBlockNode(node)
+        } else if ( math.isConditionalNode(node) ) {
+            return this.walkConditionalNode(node)
+        } else if ( math.isConstantNode(node) ) {
+            return this.walkConstantNode(node)
+        } else if ( math.isFunctionAssignmentNode(node) ) {
+            return this.walkFunctionAssignmentNode(node)
+        } else if ( math.isFunctionNode(node) ) {
+            return this.walkFunctionNode(node)
+        } else if ( math.isIndexNode(node) ) {
+            return this.walkIndexNode(node)
+        } else if ( math.isObjectNode(node) ) {
+            return this.walkObjectNode(node)
+        } else if ( math.isOperatorNode(node) ) {
+            return this.walkOperatorNode(node)
+        } else if ( math.isParenthesisNode(node) ) {
+            return this.walkParenthesisNode(node)
+        } else if ( math.isRangeNode(node) ) {
+            return this.walkRangeNode(node)
+        } else if ( (node as unknown as any).isRelationalNode ) {
+            return this.walkRelationalNode(node as unknown as any)
+        } else if ( math.isSymbolNode(node) ) {
+            return this.walkSymbolNode(node)
+        }
+
+        throw new TypeError('Invalid MathNode: ' + node)
+    }
+
+    abstract walkAccessorNode(node: math.AccessorNode): TReturn
+
+    abstract walkArrayNode(node: math.ArrayNode): TReturn
+
+    abstract walkAssignmentNode(node: math.AssignmentNode): TReturn
+
+    abstract walkBlockNode(node: math.BlockNode): TReturn
+
+    abstract walkConditionalNode(node: math.ConditionalNode): TReturn
+
+    abstract walkConstantNode(node: math.ConstantNode): TReturn
+
+    abstract walkFunctionAssignmentNode(node: math.FunctionAssignmentNode): TReturn
+
+    abstract walkFunctionNode(node: math.FunctionNode): TReturn
+
+    abstract walkIndexNode(node: math.IndexNode): TReturn
+
+    abstract walkObjectNode(node: math.ObjectNode): TReturn
+
+    abstract walkOperatorNode(node: math.OperatorNode): TReturn
+
+    abstract walkParenthesisNode(node: math.ParenthesisNode): TReturn
+
+    abstract walkRangeNode(node: math.RangeNode): TReturn
+
+    abstract walkRelationalNode(node: math.RelationalNode): TReturn
+
+    abstract walkSymbolNode(node: math.SymbolNode): TReturn
+}
+
+
+/** A walk that accumulates all different SymbolNode instances in a tree. */
+export class SymbolWalk extends MathNodeWalk<math.SymbolNode[]> {
+    walkAccessorNode(node: math.AccessorNode): math.SymbolNode[] {
+        return [
+            ...this.walk(node.object),
+            ...this.walk(node.index),
+        ]
+    }
+
+    walkArrayNode(node: math.ArrayNode): math.SymbolNode[] {
+        return node.items
+            .map(x => this.walk(x))
+            .reduce((carry, current) => current.concat(carry), [])
+    }
+
+    walkAssignmentNode(node: math.AssignmentNode): math.SymbolNode[] {
+        return [
+            ...this.walk(node.object),
+            ...this.walk(node.value),
+            ...(node.index ? this.walk(node.index) : []),
+        ]
+    }
+
+    walkBlockNode(node: math.BlockNode): math.SymbolNode[] {
+        return node.blocks
+            .map(x => x.node)
+            .map(x => this.walk(x))
+            .reduce((carry, current) => current.concat(carry), [])
+    }
+
+    walkConditionalNode(node: math.ConditionalNode): math.SymbolNode[] {
+        return [
+            ...this.walk(node.condition),
+            ...this.walk(node.trueExpr),
+            ...this.walk(node.falseExpr),
+        ]
+    }
+
+    walkConstantNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkFunctionAssignmentNode(node: math.FunctionAssignmentNode): math.SymbolNode[] {
+        return this.walk(node.expr)
+    }
+
+    walkFunctionNode(node: math.FunctionNode): math.SymbolNode[] {
+        return [
+            ...this.walk(node.fn),
+            ...node.args
+                .map(x => this.walk(x))
+                .reduce((carry, current) => current.concat(carry), []),
+        ]
+    }
+
+    walkIndexNode(node: math.IndexNode): math.SymbolNode[] {
+        return node.dimensions
+            .map(x => this.walk(x))
+            .reduce((carry, current) => current.concat(carry), [])
+    }
+
+    walkObjectNode(node: math.ObjectNode): math.SymbolNode[] {
+        return Object.values(node.properties)
+            .map(x => this.walk(x))
+            .reduce((carry, current) => current.concat(carry), [])
+    }
+
+    walkOperatorNode(node: math.OperatorNode): math.SymbolNode[] {
+        return node.args
+            .map(x => this.walk(x))
+            .reduce((carry, current) => carry.concat(current), [])
+    }
+
+    walkParenthesisNode(node: math.ParenthesisNode): math.SymbolNode[] {
+        return this.walk(node.content)
+    }
+
+    walkRangeNode(node: math.RangeNode): math.SymbolNode[] {
+        return [
+            ...this.walk(node.start),
+            ...this.walk(node.end),
+            ...(node.step ? this.walk(node.step) : []),
+        ]
+    }
+
+    walkRelationalNode(node: math.RelationalNode): math.SymbolNode[] {
+        return node.params
+            .map(x => this.walk(x))
+            .reduce((carry, current) => carry.concat(current), [])
+    }
+
+    walkSymbolNode(node: math.SymbolNode): math.SymbolNode[] {
+        return [node]
+    }
+}
+
+
+/** A walk that accumulates all SymbolNode instances used on the RHS of expressions. */
+export class RValSymbolWalk extends SymbolWalk {
+    walkAssignmentNode(node: math.AssignmentNode): math.SymbolNode[] {
+        return this.walk(node.value)
+    }
+
+    walkFunctionNode(node: math.FunctionNode): math.SymbolNode[] {
+        return [
+            ...this.walk(node.fn),  // FIXME should this be removed? Not sure if this is rval or lval
+            ...node.args
+                .map(x => this.walk(x))
+                .reduce((carry, current) => current.concat(carry), []),
+        ]
+    }
+}
+
+
+/** A walk that accumulates SymbolNode instances used on the LHS of assignments. */
+export class LValSymbolWalk extends SymbolWalk {
+    walkAccessorNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkArrayNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkAssignmentNode(node: math.AssignmentNode): math.SymbolNode[] {
+        if ( math.isSymbolNode(node.object) ) {
+            return super.walkSymbolNode(node.object)
+        }
+
+        return super.walkAccessorNode(node.object)
+    }
+
+    walkBlockNode(node: math.BlockNode): math.SymbolNode[] {
+        return node.blocks
+            .map(x => this.walk(x.node))
+            .reduce((carry, current) => current.concat(carry), [])
+    }
+
+    walkConditionalNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkConstantNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkFunctionAssignmentNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkFunctionNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkIndexNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkObjectNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkOperatorNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkParenthesisNode(node: math.ParenthesisNode): math.SymbolNode[] {
+        return this.walk(node.content)
+    }
+
+    walkRangeNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkRelationalNode(): math.SymbolNode[] {
+        return []
+    }
+
+    walkSymbolNode(): math.SymbolNode[] {
+        return []
+    }
+}
+
+
+/** A single mathematical statement. */
+export class MathStatement {
+    constructor(
+        /** Unique ID of this statement. */
+        public readonly id: StatementID,
+
+        /** The raw statement input by the user. */
+        public readonly raw: string,
+    ) {}
+
+    /** Parse the raw statement to an AST. */
+    parse(): math.MathNode {
+        return math.parse(this.raw)
+    }
+
+    /** Convert the statement to its equivalent LaTeX code. */
+    toLaTeX(): LaTeXString {
+        return this.parse().toTex() as LaTeXString
+    }
+
+    /** Render the statement as HTML string. */
+    toHTMLString(): HTMLString {
+        return katex.renderToString(this.toLaTeX(), {
+            output: 'mathml',
+        }) as HTMLString
+    }
+
+    /** Render the statement to a DOM element. */
+    toDOM(): HTMLSpanElement {
+        const node = document.createElement('span')
+        katex.render(this.toLaTeX(), node, {
+            output: 'mathml',
+        })
+        return node
+    }
+
+    /** Get all symbols referenced in this statement. */
+    symbols(): math.SymbolNode[] {
+        return (new SymbolWalk()).walk(this.parse())
+    }
+
+    /** Get all symbols defined on the LHS of this statement. */
+    defines(): math.SymbolNode[] {
+        return (new LValSymbolWalk()).walk(this.parse())
+    }
+
+    /** Get all symbols used on the RHS of this statement. */
+    uses(): math.SymbolNode[] {
+        return (new RValSymbolWalk()).walk(this.parse())
+    }
+}

src/types.ts

@@ -80,3 +80,13 @@ export type Integer = TypeTag<'@app.Integer'> & number
 export function isInteger(num: number): num is Integer {
     return !isNaN(num) && parseInt(String(num), 10) === num
 }
+
+export type LaTeXString = TypeTag<'@app.LaTeXString'> & string
+export type HTMLString = TypeTag<'@app.HTMLString'> & string
+export type StatementID = TypeTag<'@app.StatementID'> & string
+export type VariableName = TypeTag<'@app.VariableName'> & string
+
+export interface EvaluationResult {
+    variables: Record<VariableName, any>
+    statements: Record<StatementID, any>
+}