feat: new math parser for graphs

Author: Acex187x

components/mdx/graph.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, Children, type ReactNode } from "react";
+import { safeEval } from "@/lib/math/safe-eval";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyElement = { props: Record<string, any> };
@@ -22,8 +23,9 @@ const PALETTE = [
    ═══════════════════════════════════════════════════ */
 
 interface PlotProps {
-  /** JS function: (x, vars) => y. `vars` contains current slider values. */
-  fn: (x: number, vars: Record<string, number>) => number;
+  /** Math expression string. Variable `x` is the horizontal axis.
+   *  Slider variables are available by name (e.g. `"a - b * x"`). */
+  expr: string;
   /** Line color. Auto-assigned from palette if omitted. */
   color?: string;
   /** Legend label. */
@@ -140,7 +142,7 @@ export function Graph({
     if (!child || typeof child !== "object" || !("props" in child)) return;
     const p = (child as AnyElement).props;
 
-    if (typeof p.fn === "function") {
+    if (typeof p.expr === "string" && !p.name) {
       plots.push(p as PlotProps);
     } else if (typeof p.name === "string" && p.min !== undefined) {
       sliderDefs.push(p as SliderProps);
@@ -169,14 +171,11 @@ export function Graph({
     const dx = (xMax - xMin) / 200;
     for (const plot of plots) {
       for (let i = 0; i <= 200; i++) {
-        try {
-          const y = plot.fn(xMin + i * dx, vars);
-          if (isFinite(y) && Math.abs(y) < 1e8) {
-            lo = Math.min(lo, y);
-            hi = Math.max(hi, y);
-          }
-        } catch {
-          /* skip evaluation errors */
+        const x = xMin + i * dx;
+        const y = safeEval(plot.expr, { ...vars, x });
+        if (isFinite(y) && Math.abs(y) < 1e8) {
+          lo = Math.min(lo, y);
+          hi = Math.max(hi, y);
         }
       }
     }
@@ -221,13 +220,7 @@ export function Graph({
 
     for (let i = 0; i <= SAMPLES; i++) {
       const x = xMin + i * dx;
-      let y: number;
-      try {
-        y = plot.fn(x, vars);
-      } catch {
-        inPath = false;
-        continue;
-      }
+      const y = safeEval(plot.expr, { ...vars, x });
 
       if (!isFinite(y)) {
         inPath = false;

components/mdx/interactive.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, Children, type ReactNode } from "react";
+import { safeEval } from "@/lib/math/safe-eval";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyElement = { props: Record<string, any> };
@@ -12,8 +13,14 @@ type AnyElement = { props: Record<string, any> };
 interface ValueProps {
   /** Display label for this computed value. */
   label: string;
-  /** Compute function: receives all slider/toggle vars, returns display string. */
-  fn: (vars: Record<string, number>) => string;
+  /** Math expression string evaluated with all slider/toggle vars. */
+  expr: string;
+  /** Number of decimal places in output (default: 2). */
+  decimals?: number;
+  /** Prefix before the number (e.g. "$", "€"). */
+  prefix?: string;
+  /** Suffix after the number (e.g. "%", " CZK"). */
+  suffix?: string;
 }
 
 /** Displays a computed value inside `<Interactive>`. */
@@ -65,8 +72,8 @@ export function Interactive({ title, children }: InteractiveProps) {
     if (!child || typeof child !== "object" || !("props" in child)) return;
     const p = (child as AnyElement).props;
 
-    if (typeof p.fn === "function" && typeof p.label === "string") {
-      // Value: has fn + label, no name
+    if (typeof p.expr === "string" && typeof p.label === "string") {
+      // Value: has expr + label, no name
       valueDefs.push(p as ValueProps);
     } else if (
       typeof p.name === "string" &&
@@ -91,11 +98,11 @@ export function Interactive({ title, children }: InteractiveProps) {
 
   /* ── Compute values ── */
   const computedValues = valueDefs.map((vd) => {
-    try {
-      return { label: vd.label, value: vd.fn(vars) };
-    } catch {
-      return { label: vd.label, value: "—" };
-    }
+    const raw = safeEval(vd.expr, vars);
+    if (!isFinite(raw)) return { label: vd.label, value: "—" };
+    const decimals = vd.decimals ?? 2;
+    const formatted = `${vd.prefix ?? ""}${raw.toFixed(decimals)}${vd.suffix ?? ""}`;
+    return { label: vd.label, value: formatted };
   });
 
   return (

lib/math/safe-eval.ts

@@ -0,0 +1,48 @@
+import { Parser } from "expr-eval";
+
+/**
+ * Safe math expression evaluator.
+ *
+ * Uses expr-eval — a proper tokenizer/parser that ONLY understands math.
+ * No eval(), no Function(), no access to JS runtime objects.
+ *
+ * Supported:
+ *   Arithmetic: + - * / ^ %
+ *   Comparison: < > <= >= == !=
+ *   Logical:    and or not
+ *   Ternary:    condition ? a : b
+ *   Functions:  sin cos tan asin acos atan sqrt abs ceil floor round
+ *               log log2 log10 exp pow min max sign trunc
+ *   Constants:  PI E
+ *   Variables:  any name (x, a, b, price, quantity, ...)
+ */
+
+const parser = new Parser();
+
+/** Cache parsed expressions to avoid re-parsing on every slider tick. */
+const cache = new Map<string, ReturnType<typeof parser.parse>>();
+
+function getParsed(expr: string) {
+  let parsed = cache.get(expr);
+  if (!parsed) {
+    parsed = parser.parse(expr);
+    cache.set(expr, parsed);
+  }
+  return parsed;
+}
+
+/**
+ * Evaluate a math expression with the given variable bindings.
+ * Returns NaN on any error (division by zero, undefined variable, etc.).
+ */
+export function safeEval(
+  expr: string,
+  vars: Record<string, number>
+): number {
+  try {
+    const result = getParsed(expr).evaluate(vars);
+    return typeof result === "number" ? result : NaN;
+  } catch {
+    return NaN;
+  }
+}

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^3.1.1",
     "@wikipefia/mdx-compiler": "workspace:*",
+    "expr-eval": "^2.0.2",
     "flexsearch": "^0.8.212",
     "gray-matter": "^4.0.3",
     "katex": "^0.16.28",

packages/mdx-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikipefia/mdx-compiler",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Shared MDX compiler, schemas, and validation for Wikipefia content repositories",
   "type": "module",
   "main": "./dist/index.js",

packages/mdx-compiler/src/components/registry.ts

@@ -127,7 +127,7 @@ export const componentRegistry: Record<string, ComponentContract> = {
   },
   Plot: {
     props: {
-      fn: {}, // JS function expression — cannot be statically validated
+      expr: { required: true, type: "string" },
       color: { type: "string" },
       label: { type: "string" },
       dashed: { type: "boolean" },
@@ -157,7 +157,10 @@ export const componentRegistry: Record<string, ComponentContract> = {
   Value: {
     props: {
       label: { required: true, type: "string" },
-      fn: {}, // JS function expression — cannot be statically validated
+      expr: { required: true, type: "string" },
+      decimals: { type: "number" },
+      prefix: { type: "string" },
+      suffix: { type: "string" },
     },
     parent: "Interactive",
   },