Some progress

package.json

@@ -107,6 +107,7 @@
         "vscode-languageserver": "^9.0.1",
         "vscode-languageserver-protocol": "^3.17.5",
         "wasm-pack": "^0.12.1",
+        "webdriverio": "^8.39.1",
         "wireit": "^0.14.4",
         "xast-util-to-xml": "^4.0.0",
         "xastscript": "^4.0.0",

packages/doenetml-prototype/package.json

@@ -24,10 +24,24 @@
         "dev": "vite",
         "build": "wireit",
         "preview": "vite preview",
+        "test:before": "wireit",
         "test": "vitest",
         "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0"
     },
     "wireit": {
+        "test:before": {
+            "command": "vite build -c vite.rust-tests.config.ts",
+            "files": [
+                "test/utils/**/*.ts",
+                "vite.rust-tests.config.ts"
+            ],
+            "output": [
+                "test/utils/dist/**/*.js"
+            ],
+            "dependencies": [
+                "../parser:build"
+            ]
+        },
         "build": {
             "command": "vite build",
             "files": [

packages/doenetml-prototype/src/renderers/pretext/boolean.tsx

@@ -5,5 +5,5 @@ import type { BooleanProps } from "@doenet/doenetml-worker-rust";
 type BooleanData = { props: BooleanProps };
 
 export const Boolean: BasicComponent<BooleanData> = ({ node }) => {
-    return <span>{node.data.props.value.toString()}</span>;
+    return <em>{node.data.props.value.toString()}</em>;
 };

packages/doenetml-prototype/src/renderers/pretext/choice-input.tsx

@@ -1,39 +1,6 @@
 import React from "react";
 import { BasicComponent } from "../types";
-import { useAppSelector } from "../../state/hooks";
-import { renderingOnServerSelector } from "../../state/redux-slices/global";
-import "./choice-input.css";
-import { elementsArraySelector } from "../../state/redux-slices/dast";
-import { Radio, RadioGroup, RadioProvider } from "@ariakit/react";
-import { flatDastChildrenToReactChildren } from "../element";
 
 export const ChoiceInput: BasicComponent = ({ node }) => {
-    const childrenIds = React.useMemo(
-        () =>
-            node.children.filter(
-                (n) => typeof n === "number",
-            ) as unknown[] as number[],
-        [node.children],
-    );
-    const elements = useAppSelector(elementsArraySelector);
-
-    const choiceChildren = childrenIds.flatMap((id) => {
-        const choice = elements[id];
-        return choice.type === "element" && choice.name === "choice"
-            ? choice
-            : [];
-    });
-
-    return (
-        <RadioProvider>
-            <RadioGroup className="choice-input">
-                {choiceChildren.map((child, i) => (
-                    <label key={child.data.id}>
-                        <Radio value={child.data.id} />
-                        {flatDastChildrenToReactChildren(child.children)}
-                    </label>
-                ))}
-            </RadioGroup>
-        </RadioProvider>
-    );
+    return null;
 };

packages/doenetml-prototype/src/renderers/pretext/division.tsx

@@ -9,11 +9,8 @@ export const Division: BasicComponentWithPassthroughChildren<{
 }> = ({ children, node, annotation, ancestors }) => {
     const htmlId = generateHtmlId(node, annotation, ancestors);
     const titleElmId = node.data.props.title;
-    const codeNumber = node.data.props.codeNumber;
-    const xrefLabel = node.data.props.xrefLabel;
-    const displayName = `${xrefLabel.label}${
-        codeNumber ? ` ${codeNumber}.` : ""
-    }`;
+
+    const divisionType = node.data.props.divisionType;
 
     const title =
         titleElmId != null ? (
@@ -22,12 +19,12 @@ export const Division: BasicComponentWithPassthroughChildren<{
             ""
         );
 
-    return (
-        <div className="section" id={htmlId}>
-            <title>
-                {displayName} {title}
-            </title>
+    return React.createElement(
+        divisionType,
+        {},
+        <React.Fragment>
+            {title}
             {children}
-        </div>
+        </React.Fragment>,
     );
-};
+};

packages/doenetml-prototype/src/renderers/pretext/graph.tsx

@@ -12,12 +12,9 @@ import {
 import * as JSG from "jsxgraph";
 import { JSXGraph } from "jsxgraph";
 import { BasicComponent } from "../types";
-import "./graph.css";
 import { Toolbar, ToolbarItem } from "@ariakit/react";
 import { Element } from "../element";
 
-(window as any).JSG = JSG;
-
 export const GraphContext = React.createContext<JSG.Board | null>(null);
 
 /**

packages/doenetml-prototype/src/renderers/pretext/li.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { BasicComponentWithPassthroughChildren } from "../types";
 import type { LiProps } from "@doenet/doenetml-worker-rust";
-import "./li.css";
 import { generateHtmlId } from "../utils";
 
 export const Li: BasicComponentWithPassthroughChildren<{

packages/doenetml-prototype/src/renderers/pretext/m.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { MathJax } from "better-react-mathjax";
 import { BasicComponentWithPassthroughChildren } from "../types";
 import { useAppSelector } from "../../state/hooks";
 import { renderingOnServerSelector } from "../../state/redux-slices/global";
@@ -11,12 +10,9 @@ export const M: BasicComponentWithPassthroughChildren = ({ children }) => {
     }
     // better-react-mathjax cannot handle multiple children (it will not update when they change)
     // so create a single string.
-    const childrenString = `\\(${
-        Array.isArray(children) ? children.join("") : String(children)
-    }\\)`;
-    return (
-        <MathJax inline dynamic>
-            {childrenString}
-        </MathJax>
-    );
+    const childrenString = Array.isArray(children)
+        ? children.join("")
+        : String(children);
+
+    return React.createElement("m", {}, childrenString);
 };

packages/doenetml-prototype/src/renderers/pretext/math.tsx

@@ -1,22 +1,11 @@
 import React from "react";
-import { MathJax } from "better-react-mathjax";
 import { BasicComponent } from "../types";
-import { useAppSelector } from "../../state/hooks";
-import { renderingOnServerSelector } from "../../state/redux-slices/global";
 
 type MathData = { props: { latex: string } };
 
 export const Math: BasicComponent<MathData> = ({ node }) => {
-    const onServer = useAppSelector(renderingOnServerSelector);
-    if (onServer) {
-        return <span className="process-math">{node.data.props.latex}</span>;
-    }
     // better-react-mathjax cannot handle multiple children (it will not update when they change)
     // so create a single string.
-    const latexString = `\\(${node.data.props.latex}\\)`;
-    return (
-        <MathJax inline dynamic>
-            {latexString}
-        </MathJax>
-    );
+    const latexString = node.data.props.latex;
+    return React.createElement("m", {}, latexString);
 };

packages/doenetml-prototype/src/renderers/pretext/text-input.tsx

@@ -1,61 +1,11 @@
 import React from "react";
-import type { Action, TextInputProps } from "@doenet/doenetml-worker-rust";
+import type { TextInputProps } from "@doenet/doenetml-worker-rust";
 import { BasicComponent } from "../types";
-import { useAppDispatch, useAppSelector } from "../../state/hooks";
-import { renderingOnServerSelector } from "../../state/redux-slices/global";
-import "./text-input.css";
-import { coreActions } from "../../state/redux-slices/core";
 
 type TextInputData = { props: TextInputProps };
 
 export const TextInput: BasicComponent<TextInputData> = ({ node }) => {
-    const onServer = useAppSelector(renderingOnServerSelector);
-    const id = node.data.id;
     const value = node.data.props.immediateValue;
-    //const disabled = node.data.props.disabled;
-    const dispatch = useAppDispatch();
 
-    const updateValue = React.useCallback(() => {
-        let action: Action = {
-            component: "textInput",
-            actionName: "updateValue",
-            componentIdx: id,
-        };
-        dispatch(coreActions.dispatchAction(action));
-    }, [dispatch, value]);
-
-    if (onServer) {
-        return <span className="text-input">{value}</span>;
-    }
-
-    // TODO: change style to gray out when disabled
-
-    return (
-        <span className="text-input">
-            <label>
-                <input
-                    type="text"
-                    value={value}
-                    disabled={
-                        false //disabled
-                    }
-                    onChange={(e) => {
-                        const action: Action = {
-                            component: "textInput",
-                            componentIdx: id,
-                            actionName: "updateImmediateValue",
-                            args: { text: e.target.value },
-                        };
-                        dispatch(coreActions.dispatchAction(action));
-                    }}
-                    onBlur={updateValue}
-                    onKeyUp={(e) => {
-                        if (e.key === "Enter") {
-                            updateValue();
-                        }
-                    }}
-                />
-            </label>
-        </span>
-    );
+    return <em>{value}</em>;
 };

packages/doenetml-prototype/src/renderers/pretext/text.tsx

@@ -5,5 +5,5 @@ import type { TextProps } from "@doenet/doenetml-worker-rust";
 type TextData = { props: TextProps };
 
 export const Text: BasicComponent<TextData> = ({ node }) => {
-    return <span>{node.data.props.value}</span>;
+    return <React.Fragment>{node.data.props.value}</React.Fragment>;
 };

packages/doenetml-prototype/src/renderers/pretext/title.tsx

@@ -4,5 +4,5 @@ import { BasicComponentWithPassthroughChildren } from "../types";
 export const Title: BasicComponentWithPassthroughChildren<{}> = ({
     children,
 }) => {
-    return <span className="referenced-title">{children}</span>;
+    return <title>{children}</title>;
 };

packages/doenetml-prototype/src/renderers/pretext/xref.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { BasicComponentWithPassthroughChildren } from "../types";
-import { Element } from "../element";
 import type { XrefProps } from "@doenet/doenetml-worker-rust";
 
 export const Xref: BasicComponentWithPassthroughChildren<{
@@ -24,10 +23,12 @@ export const Xref: BasicComponentWithPassthroughChildren<{
     //    </details>;
     //}
 
-    return (
-        <a className="xref" href={`#${referentHtmlId}`}>
+    return React.createElement(
+        "xref",
+        {},
+        <React.Fragment>
             {children}
             {label}
-        </a>
+        </React.Fragment>,
     );
 };