Implement state variables in rust

packages/doenetml-prototype/dev/testCode.doenet

@@ -1,4 +1,7 @@
-<textInput prefill="hi" />
+<textInput prefill="hi" name="ti" />
+The value: $ti.value
+<!--
+
 <p>Use this to <m>a < b</m>test DoenetML</p>
 <p>A second paragraph! <text>with text</text></p>
 <choiceInput>
@@ -9,12 +12,9 @@
 <graph showNavigation>
   <line through="(-8,8) (9,6)" />
   <point>(2,3)</point>
-  <!--
-  <line through="(0,4)" slope="1/2" styleNumber="2" />
 
   <line equation="y=2x-8" styleNumber="3" />
   <line equation="x=-6" styleNumber="4" />
-  -->
 </graph>
 <section boxed>
   <p>A lovely section.</p>
@@ -40,4 +40,6 @@
 
 <section>
   <p><lorem generateWords="10" /></p>
-</section>
+</section>
+
+-->

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

@@ -1,18 +1,54 @@
 import React from "react";
 import { BasicComponent } from "../types";
-import { useAppSelector } from "../../state/hooks";
+import { useAppDispatch, useAppSelector } from "../../state/hooks";
 import { renderingOnServerSelector } from "../../state/redux-slices/global";
 import "./text-input.css";
+import { coreActions } from "../../state/redux-slices/core";
 
-export const TextInput: BasicComponent = ({ node }) => {
+type TextInputData = { state: { immediateValue: string } };
+
+export const TextInput: BasicComponent<TextInputData> = ({ node }) => {
     const onServer = useAppSelector(renderingOnServerSelector);
+    const id = node.data.id;
+    const value = node.data.state.immediateValue;
+    const dispatch = useAppDispatch();
+
+    const updateValue = React.useCallback(() => {
+        dispatch(
+            coreActions.dispatchAction({
+                actionName: "updateValue",
+                componentIdx: id,
+                args: { text: value },
+            }),
+        );
+    }, [dispatch, value]);
+
     if (onServer) {
-        return <span className="text-input"></span>;
+        return <span className="text-input">{value}</span>;
     }
+
     return (
         <span className="text-input">
             <label>
-                <input type="text" />
+                <input
+                    type="text"
+                    value={value}
+                    onChange={(e) => {
+                        dispatch(
+                            coreActions.dispatchAction({
+                                actionName: "updateImmediateValue",
+                                componentIdx: id,
+                                args: { text: e.target.value },
+                            }),
+                        );
+                    }}
+                    onBlur={updateValue}
+                    onKeyUp={(e) => {
+                        if (e.key === "Enter") {
+                            updateValue();
+                        }
+                    }}
+                />
             </label>
         </span>
     );

packages/doenetml-prototype/src/state/redux-slices/core/thunks.ts

@@ -1,6 +1,6 @@
 import * as Comlink from "comlink";
 import { createLoggingAsyncThunk } from "../../hooks";
-import { CoreWorker } from "@doenet/doenetml-worker-rust";
+import { Action, CoreWorker } from "@doenet/doenetml-worker-rust";
 import { doenetGlobalConfig } from "../../../global-config";
 import { RootState } from "../../store";
 import { _coreReducerActions, selfSelector } from "./slice";
@@ -86,6 +86,23 @@ export const coreThunks = {
             }
         },
     ),
+    dispatchAction: createLoggingAsyncThunk(
+        "core/dispatchAction",
+        async (action: Action, { dispatch, getState }) => {
+            const worker = getWorker(getState());
+            if (worker == null) {
+                throw new Error("No worker loaded");
+            }
+
+            try {
+                const updates = await worker.dispatchAction(action);
+                dispatch(_dastReducerActions.processElementUpdates(updates));
+            } catch (e) {
+                dispatch(_coreReducerActions._setInErrorState(true));
+                console.warn(e);
+            }
+        },
+    ),
 };
 
 export function getWorker(

packages/doenetml-prototype/src/state/redux-slices/dast/slice.ts

@@ -2,7 +2,10 @@ import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
 import type { RootState } from "../../store";
 import { DastError, DastRoot } from "@doenet/parser";
-import type { FlatDastRoot } from "@doenet/doenetml-worker-rust";
+import type {
+    ElementUpdates,
+    FlatDastRoot,
+} from "@doenet/doenetml-worker-rust";
 
 // Define a type for the slice state
 export interface DastState {
@@ -54,6 +57,39 @@ const dastSlice = createSlice({
                 state.flatDastRoot.elements[index] = element;
             }
         },
+        /**
+         * Process an `elementUpdate` coming from Core.
+         */
+        processElementUpdates: (
+            state,
+            action: PayloadAction<ElementUpdates>,
+        ) => {
+            for (const [id, update] of Object.entries(action.payload)) {
+                const elm = state.flatDastRoot.elements[Number(id)];
+                if (elm == null) {
+                    console.error(
+                        "Failed to find element in FlatDast with id =",
+                        id,
+                        "during element update request.",
+                    );
+                    continue;
+                }
+                if (elm.type === "error") {
+                    throw new Error("Updating errors is not yet implemented");
+                }
+                if (update.changed_state) {
+                    elm.data ??= { id: Number(id), state: {} };
+                    elm.data.state ??= {};
+                    Object.assign(elm.data.state, update.changed_state);
+                }
+                if (update.changed_attributes) {
+                    console.warn("Updating attributes is not yet implemented");
+                }
+                if (update.new_children) {
+                    elm.children = update.new_children;
+                }
+            }
+        },
     },
 });
 

packages/doenetml-worker-rust/doenetml-core/Cargo.toml

@@ -27,9 +27,9 @@ strum_macros = "0.25"
 [dev-dependencies]
 criterion = "0.3.6"
 
-[[bench]]
-name = "my_benchmark"
-harness = false
+# [[bench]]
+# name = "my_benchmark"
+# harness = false
 
 
 

packages/doenetml-worker-rust/doenetml-core/doenetml-derive/Cargo.toml

@@ -12,4 +12,5 @@ proc-macro = true
 quote = "1"
 proc-macro2 = "1.0"
 syn = "2.0"
+# syn = { version = "2.0", features = ["extra-traits"] }
 convert_case = "0.5.0"