greatly simplified app

trying to simplify things a bit more... will get rid of 'onResolve'
2025-05-13 18:29:37 +02:00 · 2025-05-13 16:33:25 +02:00
11 changed files with 214 additions and 222 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -10,7 +10,7 @@ importers:
    dependencies:
      dope2:
        specifier: git+https://deemz.org/git/joeri/dope2.git
-        version: git+https://deemz.org/git/joeri/dope2.git#e631f11aa52b2adda8809c1b0b41cc991fbe8890
+        version: git+https://deemz.org/git/joeri/dope2.git#443a13998dc3eccab26c27bee4fa056cdbc8f994
      react:
        specifier: ^19.1.0
        version: 19.1.0
@ -633,8 +633,8 @@ packages:
    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
    engines: {node: '>= 0.8'}

-  dope2@git+https://deemz.org/git/joeri/dope2.git#e631f11aa52b2adda8809c1b0b41cc991fbe8890:
-    resolution: {commit: e631f11aa52b2adda8809c1b0b41cc991fbe8890, repo: https://deemz.org/git/joeri/dope2.git, type: git}
+  dope2@git+https://deemz.org/git/joeri/dope2.git#443a13998dc3eccab26c27bee4fa056cdbc8f994:
+    resolution: {commit: 443a13998dc3eccab26c27bee4fa056cdbc8f994, repo: https://deemz.org/git/joeri/dope2.git, type: git}
    version: 0.0.1

  dunder-proto@1.0.1:
@ -1762,7 +1762,7 @@ snapshots:

  depd@2.0.0: {}

-  dope2@git+https://deemz.org/git/joeri/dope2.git#e631f11aa52b2adda8809c1b0b41cc991fbe8890:
+  dope2@git+https://deemz.org/git/joeri/dope2.git#443a13998dc3eccab26c27bee4fa056cdbc8f994:
    dependencies:
      functional-red-black-tree: 1.0.1

--- a/src/App.tsx
+++ b/src/App.tsx
@ -6,14 +6,15 @@ import { CommandContext } from './CommandContext';
 import { EnvContext } from './EnvContext';

 export function App() {
-  const [history, setHistory] = useState([initialEditorState]);
+  // const [history, setHistory] = useState([initialEditorState]);
  // const [history, setHistory] = useState([nonEmptyEditorState]);
-  // const [history, setHistory] = useState([tripleFunctionCallEditorState]);
+  const [history, setHistory] = useState([tripleFunctionCallEditorState]);

  const [future, setFuture] = useState<EditorState[]>([]);

-  const pushHistory = (s: EditorState) => {
-    setHistory(history.concat([s]));
+  const pushHistory = (callback: (p: EditorState) => EditorState) => {
+    const newState = callback(history.at(-1)!);
+    setHistory(history.concat([newState]));
    setFuture([]);
  };

@ -50,11 +51,11 @@ export function App() {
    window.onkeydown = onKeyDown;
  }, []);

-  const commands = [
-    ["call"     , "[c] call"              ],
-    ["eval"     , "[e] [Tab] [Enter] eval"],
-    ["transform", "[t] [.] transform"         ],
-    ["let"      , "[l] [=] let ... in ..."    ],
+  const commands: [string, string[], string][] = [
+    ["call"     , ['c'                      ], "call"          ],
+    ["eval"     , ['e','Tab','Enter'        ], "eval"          ],
+    ["transform", ['t', '.'                 ], "transform"     ],
+    ["let"      , ['l', '=', 'a'            ], "let ... in ..."],
  ];

  const [highlighted, setHighlighted] = useState(
@ -74,8 +75,9 @@ export function App() {
        <button disabled={future.length===0} onClick={onRedo}>Redo ({future.length})  [Ctrl+Shift+Z]</button>
        Commands:
        {
-          commands.map(([_, descr], i) =>
+          commands.map(([_, keys, descr], i) =>
            <span key={i} className={'command' + (highlighted[i] ? (' highlighted') : '')}>
+              {keys.map((key, j) => <kbd key={j}>{key}</kbd>)}
              {descr}
            </span>)
        }
@ -86,11 +88,12 @@ export function App() {
          <Editor
            state={history.at(-1)!}
            setState={pushHistory}
-            onResolve={() => {}}
            onCancel={() => {}}
            filter={() => true}
          />
        </CommandContext>
+
+
      </main>

      <footer>
--- a/src/CallBlock.css
+++ b/src/CallBlock.css
@ -73,12 +73,26 @@
  border-left-color: darkred;
 }
 .functionBlock.unifyError > .functionParams > .outputParam > .inputParam > .inputParam {
-  background-color: rgb(95, 4, 4);
-  color: white;
+  /* background-color: rgb(95, 4, 4); */
+  background-color: pink;
+  /* color: white; */
+  color: black;
 }
 .functionBlock.unifyError  > .functionParams > .outputParam > .inputParam > .inputParam:after {
-  border-left-color: rgb(95, 4, 4);
+  /* border-left-color: rgb(95, 4, 4); */
+  border-left-color: pink;
 }
+.functionBlock.unifyError > .functionParams > .outputParam > .inputParam > .inputParam > .inputParam {
+  /* background-color: rgb(95, 4, 4); */
+  background-color: pink;
+  /* color: white; */
+  color: black;
+}
+.functionBlock.unifyError  > .functionParams > .outputParam > .inputParam > .inputParam > .inputParam:after {
+  /* border-left-color: rgb(95, 4, 4); */
+  border-left-color: pink;
+}
+

 .functionBlock.unifyError > .functionParams > .outputParam {
  background-color: pink;
--- a/src/CallBlock.tsx
+++ b/src/CallBlock.tsx
@ -1,13 +1,14 @@
-import { useState } from "react";
-
-import { apply, UnifyError, assignFn, getType, getSymbol, symbolFunction } from "dope2";
+import { apply, assignFn, getSymbol, getType, NotAFunctionError, symbolFunction, UnifyError } from "dope2";

 import { Editor, type EditorState } from "./Editor";
 import { Value } from "./Value";
-import type { Dynamic, State2Props } from "./util/extra";
+import type { Dynamic, SetStateFn, State2Props } from "./util/extra";

+import { useEffect } from "react";
 import "./CallBlock.css";

+type ResolvedType = Dynamic | Error | undefined;
+
 export interface CallBlockState<
  FnState=EditorState,
  InputState=EditorState,
@ -15,88 +16,74 @@ export interface CallBlockState<
  kind: "call";
  fn: FnState;
  input: InputState;
-  resolved: undefined | Dynamic;
-  // focus: boolean;
+  resolved: ResolvedType;
 }

 interface CallBlockProps<
  FnState=EditorState,
  InputState=EditorState,
-> extends State2Props<CallBlockState<FnState,InputState>> {
-  onResolve: (resolved: EditorState) => void;
+> extends State2Props<CallBlockState<FnState,InputState>,EditorState> {
 }

-function headlessCallBlock({state, setState, onResolve}: CallBlockProps) {
-  const [unifyError, setUnifyError] = useState<typeof UnifyError | undefined>(undefined);
-  const {fn, input } = state;
-  const setFn = (fn: EditorState) => {
-    setState({...state, fn});
+
+function have(resolved: ResolvedType) {
+  return resolved && !(resolved instanceof Error);
+}
+
+function headlessCallBlock({state, setState}: CallBlockProps) {
+  const {fn, input} = state;
+  const setFn = (callback: SetStateFn) => {
+    setState(state => ({...state, fn: callback(state.fn)}));
  }
-  const setInput = (input: EditorState) => {
-    setState({...state, input});
+  const setInput = (callback: SetStateFn) => {
+    setState(state => ({...state, input: callback(state.input)}));
  }
-  const setResolved = (resolved?: Dynamic) => {
-    setState({...state, resolved});
+  const setResolved = (callback: SetStateFn<ResolvedType>) => {
+    setState(state => ({...state, resolved: callback(state.resolved)}));
  }
-  const makeTheCall = (input, fn) => {
-    try {
-      const outputResolved = apply(input.resolved)(fn.resolved);
-      setResolved(outputResolved);
-      onResolve({
-        ...state, resolved: outputResolved
-      });
-      setUnifyError(undefined);
-    }
-    catch (e) {
-      if (!(e instanceof UnifyError)) {
-        throw e;
+  useEffect(() => {
+    // Here we do something spooky: we update the state in response to state change...
+    // The reason this shouldn't give problems is because we update the state in such a way that the changes only 'trickle up', rather than getting stuck in a cycle.
+    if (have(input.resolved) && have(fn.resolved)) {
+      try {
+        const outputResolved = apply(input.resolved)(fn.resolved); // may throw
+        setResolved(() => outputResolved); // success
+      }
+      catch (e) {
+        if (!(e instanceof UnifyError) && !(e instanceof NotAFunctionError)) {
+          throw e;
+        }
+        setResolved(() => e as Error); // eval error
      }
-      setUnifyError(e as typeof UnifyError);
-      onResolve({
-        ...state, resolved: undefined
-      })
    }
-  };
-  const onFnResolve = (fnState) => {
-    if (input.resolved) {
-      makeTheCall(input, fnState);
+    else if (input.resolved instanceof Error) {
+      setResolved(() => input.resolved); // bubble up the error
+    }
+    else if (fn.resolved instanceof Error) {
+      setResolved(() => fn.resolved); // bubble up the error
    }
    else {
-      // setFn(fnState);
-      setResolved(undefined);
-      onResolve({
-        ...state, resolved: undefined
-      });
+      // no errors and at least one is undefined:
+      setResolved(() => undefined); // chill out
    }
-  };
-  const onInputResolve = (inputState) => {
-    if (fn.resolved) {
-      makeTheCall(inputState, fn);
-    }
-    else {
-      setResolved(undefined);
-      onResolve({
-        ...state, resolved: undefined
-      });
-    }
-  };
+  }, [input.resolved, fn.resolved]);
  const onFnCancel = () => {
-    setState(input);
+    setState(state => state.input); // we become our input
  }
  const onInputCancel = () => {
-    setState(fn);
+    setState(state => state.fn); // we become our function
  }
-  return {unifyError, setFn, setInput, onFnResolve, onInputResolve, onFnCancel, onInputCancel};
+  return {setFn, setInput, onFnCancel, onInputCancel};
 }

-export function CallBlock({ state, setState, onResolve }: CallBlockProps) {
-  const {unifyError, setFn, setInput, onFnResolve, onInputResolve, onInputCancel}
-    = headlessCallBlock({ state, setState, onResolve });
-  return <span className={"functionBlock" + (unifyError ? " unifyError" : "")}>
+export function CallBlock({ state, setState }: CallBlockProps) {
+  const {setFn, setInput, onFnCancel, onInputCancel}
+    = headlessCallBlock({ state, setState });
+  return <span className={"functionBlock" + ((state.resolved instanceof Error) ? " unifyError" : "")}>
    <FunctionHeader
      fn={state.fn}
      setFn={setFn}
-      onFnResolve={onFnResolve}
+      onFnCancel={onFnCancel}
      input={state.input} />
    <div className="functionParams">
      <div className="outputParam">
@ -104,110 +91,93 @@ export function CallBlock({ state, setState, onResolve }: CallBlockProps) {
        <InputParams
          fn={state.fn}       setFn={setFn}
          input={state.input} setInput={setInput}
-          onFnResolve={onFnResolve}
-          onInputResolve={onInputResolve} onInputCancel={onInputCancel} />
-          
+          onInputCancel={onInputCancel} />
        {/* Output (or Error) */}
-        {state.resolved && <Value dynamic={state.resolved} />}
-        {unifyError && unifyError.toString()}
+        { state.resolved instanceof Error && state.resolved.toString()
+        || state.resolved && <><Value dynamic={state.resolved} />&#x2611;</>}
      </div>
    </div>
  </span>;
 }

-function FunctionHeader({ fn, setFn, input, onFnResolve }) {
+function filterFnInputs(fn: Dynamic|Error|undefined, input: Dynamic|Error|undefined) {
+  if (!have(fn) || !have(input)) {
+    return false;
+  }
+  const fnType = getType(fn);
+  if (getSymbol(fnType) !== symbolFunction) {
+    return false; // filter out non-functions already
+  }
+  try {
+    assignFn(fnType, getType(input)); // may throw
+    return true;
+  } catch (e) {
+    if (!(e instanceof UnifyError)) {
+      throw e;
+    }
+    return false;
+  }
+}
+
+function FunctionHeader({ fn, setFn, input, onFnCancel }) {
  if (fn.kind === "call") {
    // if the function we're calling is itself the result of a function call,
    // then we are anonymous, and so we don't draw a function name

    // recurse:
    const {
-      onFnResolve   : onFnFnResolve
-    } = headlessCallBlock({state: fn, setState: setFn, onResolve: onFnResolve});
+      setFn         : setFnFn,
+      onFnCancel    : onFnFnCancel,
+    } = headlessCallBlock({state: fn, setState: setFn});

    return <FunctionHeader
      fn={fn.fn}
-      setFn={fnFn => setFn({...fn, fn: fnFn})}
-      onFnResolve={onFnFnResolve}
+      setFn={setFnFn}
+      onFnCancel={onFnFnCancel}
      input={fn.input} />;
  }
  else {
-    const filterCompatibleFns = ([_name, dynamic]: [string, Dynamic]) => {
-      if (input.resolved) {
-        try {
-          const type = getType(dynamic);
-          if (getSymbol(type) !== symbolFunction) {
-            return false;
-          }
-          assignFn(type, getType(input.resolved));
-        } catch (e) {
-          if (!(e instanceof UnifyError)) {
-            throw e;
-          }
-          return false;
-        }  
-      }
-      return true;
-    }
-  
    //  end of recursion - draw function name
-    return <div className="functionName">
+    return <span className="functionName">
      &nbsp;&#119891;&#119899;&nbsp;
      <Editor
        state={fn}
        setState={setFn}
-        onResolve={onFnResolve}
-        onCancel={() => {/*todo*/}}
-        filter={filterCompatibleFns} />
-    </div>;
+        onCancel={onFnCancel}
+        filter={([_, fnCandidate]) => filterFnInputs(fnCandidate, input.resolved)} />
+    </span>;
  }
 }

-function InputParams({ fn, setFn, input, setInput, onFnResolve, onInputResolve, onInputCancel }) {
-  const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
-    if (fn.resolved) {
-      try {
-        assignFn(getType(fn.resolved), getType(dynamic));
-      } catch (e) {
-        if (!(e instanceof UnifyError)) {
-          throw e;
-        }
-        return false;
-      }  
-    }
-    return true;
-  }
+function InputParams({ fn, setFn, input, setInput, onInputCancel }) {
  return <div className="inputParam">
    {(fn.kind === "call") &&
      // if the function we're calling is itself the result of a function call,
      // then we render its input parameter nested in our own input parameter box, which is way more readable

-      // Input(s) of the function we're calling:
-      <NestedInputParams fn={fn} setFn={setFn} onFnResolve={onFnResolve} />
+      // recurse:
+      <NestedParams fn={fn} setFn={setFn}/>
    }
    {/* Our own input */}
    <Editor
      state={input}
      setState={setInput}
-      onResolve={onInputResolve}
      onCancel={onInputCancel}
-      filter={filterCompatibleInputs}
+      filter={([_, inputCandidate]) => filterFnInputs(fn.resolved, inputCandidate)}
      />
  </div>;
 }

-function NestedInputParams({fn, setFn, onFnResolve}) {
+function NestedParams({fn, setFn}) {
  const {
-    onInputResolve: onFnInputResolve,
-    onFnResolve   : onFnFnResolve,
-  } = headlessCallBlock({state: fn, setState: setFn, onResolve: onFnResolve});
+      setFn         : setFnFn,
+      setInput      : setFnInput,
+    } = headlessCallBlock({state: fn, setState: setFn});
  return <InputParams
    fn={fn.fn}
-    setFn={fnFn => setFn({...fn, fn: fnFn})}
+    setFn={setFnFn}
    input={fn.input}
-    setInput={fnInput => setFn({...fn, input: fnInput})}
-    onFnResolve={onFnFnResolve}
-    onInputResolve={onFnInputResolve}
+    setInput={setFnInput}
    onInputCancel={() => {/*todo*/}}
    />;
 }
--- a/src/Editor.css
+++ b/src/Editor.css
@ -3,5 +3,5 @@
 }

 .commandInput {
-  width: 160px;
+  width: 90px;
 }
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@ -21,7 +21,6 @@ export type EditorState =

 interface EditorProps extends State2Props<EditorState> {
  filter: (suggestion: [string, Dynamic]) => boolean;
-  onResolve: (state: EditorState) => void;
  onCancel: () => void;
 }

@ -52,7 +51,7 @@ function removeFocus(state: EditorState): EditorState {
  return state;
 }

-export function Editor({state, setState, onResolve, onCancel, filter}: EditorProps) {
+export function Editor({state, setState, onCancel, filter}: EditorProps) {
  const [needCommand, setNeedCommand] = useState(false);
  const commandInputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
@ -60,22 +59,27 @@ export function Editor({state, setState, onResolve, onCancel, filter}: EditorPro
      commandInputRef.current?.focus();
    }
  }, [needCommand]);
-  const onMyResolve = (editorState: EditorState) => {
-    setState(editorState);
-    if (editorState.resolved) {
-      setNeedCommand(true);
-    }
-    else {
-      // unresolved
-      setNeedCommand(false);
-      onResolve(editorState); // pass up the fact that we're unresolved
-    }
-  }
+  // const onMyResolve = (editorState: EditorState) => {
+  //   setState(editorState);
+  //   onResolve(editorState);
+  //   return;
+    
+
+  //   if (editorState.resolved) {
+  //     setNeedCommand(true);
+  //   }
+  //   else {
+  //     // unresolved
+  //     setNeedCommand(false);
+  //     onResolve(editorState); // pass up the fact that we're unresolved
+  //   }
+  // }

  const globalContext = useContext(CommandContext);
  const onCommand = (e: React.KeyboardEvent) => {
-    const type = getType(state.resolved);
-    const commands = getCommands(type);
+    // const type = getType(state.resolved);
+    // const commands = getCommands(type);
+    const commands = ['e', 't', 'Enter', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Tab', 'l', '=', '.', 'c'];
    if (!commands.includes(e.key)) {
      return;
    }
@ -83,7 +87,7 @@ export function Editor({state, setState, onResolve, onCancel, filter}: EditorPro
    setNeedCommand(false);
    // u -> pass Up
    if (e.key === "e" || e.key === "Enter" || e.key === "Tab" && !e.shiftKey) {
-      onResolve(state);
+      // onResolve(state);
      globalContext?.doHighlight.eval();
      return;
    }
@ -94,12 +98,12 @@ export function Editor({state, setState, onResolve, onCancel, filter}: EditorPro
    // c -> Call
    if (e.key === "c") {
      // we become CallBlock
-      setState({
+      setState(state => ({
        kind: "call",
        fn: removeFocus(state),
        input: initialEditorState,
        resolved: undefined,
-      });
+      }));
      globalContext?.doHighlight.call();
      // focusNextElement();
      return;
@ -107,12 +111,12 @@ export function Editor({state, setState, onResolve, onCancel, filter}: EditorPro
    // t -> Transform
    if (e.key === "t" || e.key === ".") {
      // we become CallBlock
-      setState({
+      setState(state => ({
        kind: "call",
        fn: initialEditorState,
        input: removeFocus(state),
        resolved: undefined,
-      });
+      }));
      globalContext?.doHighlight.transform();
      return;
    }
@ -128,13 +132,13 @@ export function Editor({state, setState, onResolve, onCancel, filter}: EditorPro
    // = -> assign to name
    if (e.key === 'l' || e.key === '=') {
      // we become LetInBlock
-      setState({
+      setState(state => ({
        kind: "let",
        inner: removeFocus(initialEditorState),
        name: "",
        value: removeFocus(state),
        resolved: undefined,
-      });
+      }));
      globalContext?.doHighlight.let();
      return;
    }
@ -145,22 +149,19 @@ export function Editor({state, setState, onResolve, onCancel, filter}: EditorPro
      case "input":
        return <InputBlock
          state={state}
-          setState={setState}
+          setState={setState as (callback:(p:InputBlockState)=>EditorState)=>void}
          filter={filter}
-          onResolve={onMyResolve}
          onCancel={onCancel}
        />;
      case "call":
        return <CallBlock
          state={state}
-          setState={setState}
-          onResolve={onMyResolve}
+          setState={setState as (callback:(p:CallBlockState)=>EditorState)=>void}
        />;
      case "let":
        return <LetInBlock
          state={state}
-          setState={setState}
-          onResolve={() => {}}
+          setState={setState as (callback:(p:LetInBlockState)=>EditorState)=>void}
        />;
      case "lambda":
        return <></>;
@ -169,22 +170,19 @@ export function Editor({state, setState, onResolve, onCancel, filter}: EditorPro
  return <>
    {renderBlock()}
    {
-      (state.resolved)
+      (state.resolved && !(state.resolved instanceof Error))
      ? <div className="typeSignature">
          :: <Type type={getType(state.resolved)} />
-          { (needCommand)
-            ? <input
-                ref={commandInputRef}
-                spellCheck={false}
-                className="editable commandInput"
-                placeholder={`<command: ${getShortCommands(getType(state.resolved))}>`}
-                onKeyDown={onCommand}
-                value={""}
-                onChange={() => {}} /> /* gets rid of React warning */
-            : <></>
-          }
        </div>
      : <></>
    }
+    <input
+        ref={commandInputRef}
+        spellCheck={false}
+        className="editable commandInput"
+        placeholder={`<command>`}
+        onKeyDown={onCommand}
+        value={""}
+        onChange={() => {}} />
  </>;
 }
--- a/src/InputBlock.tsx
+++ b/src/InputBlock.tsx
@ -18,7 +18,6 @@ export interface InputBlockState {

 interface InputBlockProps extends State2Props<InputBlockState> {
  filter: (suggestion: [string, Dynamic]) => boolean;
-  onResolve: (state: InputBlockState) => void;
  onCancel: () => void;
 }

@ -31,6 +30,7 @@ const computeSuggestions = (text, env, filter) => {
    ... (asInt ? [[asInt.toString(), newDynamic(BigInt(asInt))(Int)]] : []),
    ... trie.suggest(env.name2dyn)(text)(Infinity),
  ]
+  return ls;
  return [
    ...ls.filter(filter), // ones that match filter come first
    ...ls.filter(s => !filter(s)),
@ -38,17 +38,13 @@ const computeSuggestions = (text, env, filter) => {
  // .slice(0,30);
 }

-export function InputBlock({ state, setState, filter, onResolve, onCancel }: InputBlockProps) {
+export function InputBlock({ state, setState, filter, onCancel }: InputBlockProps) {
  const {text, resolved, focus} = state;
  const env = useContext(EnvContext);
  const inputRef = useRef<HTMLInputElement>(null);
  const [i, setI] = useState(0); // selected suggestion idx
  const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not

-  const setText = (text: string) => {
-    setState({...state, text});
-  }
-
  const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
  const suggestions = useMemo(() => computeSuggestions(text, env, filter), [text]);

@ -60,32 +56,22 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
    }
  }, [focus]);

-  const onSelectSuggestion = ([name, dynamic]) => {
-    onResolve({
-      kind: "input",
-      text: name,
-      resolved: dynamic,
-      focus: false,
-    });
-  };
-
-  const onInput = e => {
-    setText(e.target.value);
-    if (resolved) {
-      // un-resolve
-      onResolve({
-        kind: "input",
-        text: e.target.value,
-        resolved: undefined,
-        focus: true,
-      });
+  useEffect(() => {
+    if (suggestions.length >= i) {
+      setI(0);
    }
-  };
+  }, [suggestions.length]);

  const getCaretPosition = () => {
    return inputRef.current?.selectionStart || -1;
  }

+  const onTextChange = newText => {
+    const found = trie.get(env.name2dyn)(newText);
+    setState(state => ({...state, text: newText, resolved: found}));
+  }
+
+  // fired before onInput
  const onKeyDown = (e: React.KeyboardEvent) => {
    const fns = {
      Tab: () => {
@ -97,7 +83,7 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
          // not shift key
          if (singleSuggestion.length > 0) {
            const newText = text + singleSuggestion;
-            setText(newText);
+            onTextChange(newText);
            setRightMostCaretPosition(inputRef.current);
            e.preventDefault();  
          }
@ -116,7 +102,7 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
        e.preventDefault();  
      },
      ArrowLeft: () => {
-        if (getCaretPosition() === 0) {
+        if (getCaretPosition() <= 0) {
          focusPrevElement();
          e.preventDefault();
        }
@ -141,6 +127,14 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
    fns[e.key]?.();
  };

+  const onInput = e => {
+    onTextChange(e.target.value);
+  };
+
+  const onSelectSuggestion = ([name, dynamic]) => {
+    setState(state => ({...state, text: name, resolved: dynamic}));
+  };
+
  return <span>
    <span className="">
      {/* Dropdown suggestions */}
@ -164,6 +158,7 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
        spellCheck={false}/>
      {/* Single 'grey' suggestion */}
      <span className="text-block suggest">{singleSuggestion}</span>
+      { resolved && <>&#x2611;</>}
    </span>
  </span>;
 }
--- a/src/LetInBlock.tsx
+++ b/src/LetInBlock.tsx
@ -16,20 +16,19 @@ export interface LetInBlockState {
 }

 interface LetInBlockProps extends State2Props<LetInBlockState> {
-  onResolve: (resolved: EditorState) => void;
 }


-export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
+export function LetInBlock({state, setState}: LetInBlockProps) {
  const {name, value, inner} = state;
  const env = useContext(EnvContext);
  const nameRef = useRef<HTMLInputElement>(null);

-  const setInner = inner => setState({...state, inner});
-  const setValue = value => setState({...state, value});
+  const setInner = inner => setState(state => ({...state, inner}));
+  const setValue = value => setState(state => ({...state, value}));

  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState({...state, name: e.target.value});
+    setState(state => ({...state, name: e.target.value}));
  }

  useEffect(() => {
@ -55,7 +54,6 @@ export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
        state={value}
        setState={setValue}
        filter={() => true}
-        onResolve={() => {}}
        onCancel={() => {}}
        />
      &nbsp;<span className="keyword">in</span>
@ -66,7 +64,6 @@ export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
          state={inner}
          setState={setInner}
          filter={() => true}
-          onResolve={onResolve}
          onCancel={() => {}}
          />
      </EnvContext>
--- a/src/Value.tsx
+++ b/src/Value.tsx
@ -1,4 +1,4 @@
-import {getType, getInst, getSymbol, Double, Int, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, eqType, match, getLeft, getRight, dict} from "dope2";
+import {getType, getInst, getSymbol, Double, Int, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, eqType, match, getLeft, getRight, dict, Bool} from "dope2";

 import "./Value.css";

@ -11,6 +11,9 @@ export function Value({dynamic}) {
  if (eqType(type)(Int)) {
    return <ValueInt val={inst}/>;
  }
+  if (eqType(type)(Bool)) {
+    return <ValueBool val={inst}/>;
+  }

  const symbol = getSymbol(type);
  switch (symbol) {
@ -48,6 +51,9 @@ function ValueInt({val}) {
 function ValueFunction() {
  return <>&#119891;&#119899;&nbsp;</>;
 }
+function ValueBool({val}) {
+  return <span className="valuePrimitive">{val.toString()}</span>;
+}
 // function Sum({val, elemType}) {
 //   return 
 // }
--- a/src/index.css
+++ b/src/index.css
@ -9,3 +9,12 @@ body {
  font-style: normal;
  font-variation-settings: "wdth" 100;
 }
+
+kbd {
+  border: 2px darkgrey;
+  color: rgb(63, 63, 63);
+  border-style: outset;
+  background-color: whitesmoke;
+  border-radius: 3px;
+  margin: 0 2px 0 2px;
+}
--- a/src/util/extra.ts
+++ b/src/util/extra.ts
@ -5,9 +5,9 @@ export interface Dynamic {
  t: any;
 }

-export interface State2Props<T> {
-  state: T;
-  // setState: (callback: (state: T) => T) => void;
-  // setState: (state: T) => void;
-  setState: (state: EditorState) => void;
+export type SetStateFn<InType=EditorState,OutType=InType> = (state: InType) => OutType;
+
+export interface State2Props<InType,OutType=InType> {
+  state: InType;
+  setState: (callback: SetStateFn<InType,OutType>) => void;
 }
Author	SHA1	Message	Date
Joeri Exelmans	35d1034c67	greatly simplified app	2025-05-13 18:29:37 +02:00
Joeri Exelmans	9c0c2dab90	trying to simplify things a bit more... will get rid of 'onResolve'	2025-05-13 16:33:25 +02:00