research/dope2-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rename Editor -> ExprBlock

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-18 11:10:25 +02:00
parent fe83532261
commit 93f665ba8f
9 changed files with 55 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/App.tsx
View file

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import './App.css';
import { GlobalContext } from './GlobalContext';
import { Editor, type EditorState } from './Editor';
import { ExprBlock, type ExprBlockState } from './ExprBlock';
import { extendedEnv } from './EnvContext';
import { biggerExample, initialEditorState, lambda2Params, nonEmptyEditorState, tripleFunctionCallEditorState } from "./configurations";
import { evalEditorBlock } from "./eval";
@ -14,7 +14,7 @@ const commands: [string, string[], string][] = [
["lambda" , ['a' ], "λx: …" ],
];
const examples: [string, EditorState][] = [
const examples: [string, ExprBlockState][] = [
["empty editor", initialEditorState],
["push to list", nonEmptyEditorState],
["function w/ 4 params", tripleFunctionCallEditorState],
@ -23,8 +23,8 @@ const examples: [string, EditorState][] = [
];
type AppState = {
history: EditorState[],
future: EditorState[],
history: ExprBlockState[],
future: ExprBlockState[],
}
const defaultState = {
@ -63,7 +63,7 @@ export function App() {
setAppState(_ => defaultState);
}
const pushHistory = (callback: (p: EditorState) => EditorState) => {
const pushHistory = (callback: (p: ExprBlockState) => ExprBlockState) => {
setAppState(({history}) => {
const newState = callback(history.at(-1)!);
return {
@ -162,7 +162,7 @@ export function App() {
<main onKeyDown={onKeyDown}>
<GlobalContext value={{undo: onUndo, redo: onRedo, doHighlight, syntacticSugar}}>
<Editor
<ExprBlock
state={appState.history.at(-1)!}
setState={pushHistory}
onCancel={() => {}}

16
src/CallBlock.tsx
View file

@ -1,6 +1,6 @@
import { useContext } from "react";
import { Editor, type EditorState, type SetStateFn, type State2Props } from "./Editor";
import { ExprBlock, type ExprBlockState, type SetStateFn, type State2Props } from "./ExprBlock";
import { EnvContext } from "./EnvContext";
import { evalCallBlock2, evalEditorBlock, scoreResolved, type ResolvedType } from "./eval";
import { GlobalContext } from "./GlobalContext";
@ -10,14 +10,14 @@ import "./CallBlock.css";
export interface CallBlockState {
kind: "call";
fn: EditorState;
input: EditorState;
fn: ExprBlockState;
input: ExprBlockState;
}
interface CallBlockProps<
FnState=EditorState,
InputState=EditorState,
> extends State2Props<CallBlockState,EditorState> {}
FnState=ExprBlockState,
InputState=ExprBlockState,
> extends State2Props<CallBlockState,ExprBlockState> {}
function nestedFnProperties({state, setState, suggestionPriority}: CallBlockProps, env) {
const setFn = (callback: SetStateFn) => {
@ -91,7 +91,7 @@ function FunctionHeader(props) {
// end of recursion - draw function name
return <span className="functionName">
&nbsp;&#119891;&#119899;&nbsp;
<Editor {...nestedProperties} />
<ExprBlock {...nestedProperties} />
</span>;
}
}
@ -109,7 +109,7 @@ function InputParams({ depth, errorDepth, ...rest }) {
errorDepth={errorDepth}
/>}
{/* Our own input param */}
<Editor
<ExprBlock
{...nestedInputProperties(rest as CallBlockProps, env)}
/>
</div>;

0
src/Editor.css → src/ExprBlock.css
View file

29
src/Editor.tsx → src/ExprBlock.tsx
View file

@ -3,24 +3,25 @@ import { useContext, useEffect, useRef, useState } from "react";
import { getSymbol, getType, symbolFunction } from "dope2";
import { CallBlock, type CallBlockState } from "./CallBlock";
import { InputBlock, type InputBlockState, type SuggestionType } from "./InputBlock";
import { Type } from "./Type";
import { evalEditorBlock, type ResolvedType } from "./eval";
import { GlobalContext } from "./GlobalContext";
import "./Editor.css";
import { EnvContext } from "./EnvContext";
import { GlobalContext } from "./GlobalContext";
import { InputBlock, type InputBlockState } from "./InputBlock";
import { LambdaBlock, type LambdaBlockState } from "./LambdaBlock";
import { LetInBlock, type LetInBlockState } from "./LetInBlock";
import { Type } from "./Type";
import { initialEditorState } from "./configurations";
import { evalEditorBlock, type ResolvedType } from "./eval";
import { focusNextElement, focusPrevElement } from "./util/dom_trickery";
export type EditorState =
import "./ExprBlock.css";
export type ExprBlockState =
InputBlockState
| CallBlockState
| LetInBlockState
| LambdaBlockState;
export type SetStateFn<InType = EditorState, OutType = InType> = (state: InType) => OutType;
export type SetStateFn<InType = ExprBlockState, OutType = InType> = (state: InType) => OutType;
export interface State2Props<InType, OutType = InType> {
state: InType;
@ -28,7 +29,7 @@ export interface State2Props<InType, OutType = InType> {
suggestionPriority: (suggestion: ResolvedType) => number;
}
interface EditorProps extends State2Props<EditorState> {
interface ExprBlockProps extends State2Props<ExprBlockState> {
onCancel: () => void;
}
@ -46,7 +47,7 @@ function getShortCommands(type) {
return 'Tab|.';
}
function removeFocus(state: EditorState): EditorState {
function removeFocus(state: ExprBlockState): ExprBlockState {
if (state.kind === "input") {
return {...state, focus: false};
}
@ -59,7 +60,7 @@ function removeFocus(state: EditorState): EditorState {
return state;
}
export function Editor({state, setState, onCancel, suggestionPriority}: EditorProps) {
export function ExprBlock({state, setState, onCancel, suggestionPriority}: ExprBlockProps) {
const env = useContext(EnvContext);
const [needCommand, setNeedCommand] = useState(false);
const commandInputRef = useRef<HTMLInputElement>(null);
@ -158,26 +159,26 @@ export function Editor({state, setState, onCancel, suggestionPriority}: EditorPr
case "input":
return <InputBlock
state={state}
setState={setState as (callback:(p:InputBlockState)=>EditorState)=>void}
setState={setState as (callback:(p:InputBlockState)=>ExprBlockState)=>void}
suggestionPriority={suggestionPriority}
onCancel={onCancel}
/>;
case "call":
return <CallBlock
state={state}
setState={setState as (callback:(p:CallBlockState)=>EditorState)=>void}
setState={setState as (callback:(p:CallBlockState)=>ExprBlockState)=>void}
suggestionPriority={suggestionPriority}
/>;
case "let":
return <LetInBlock
state={state}
setState={setState as (callback:(p:LetInBlockState)=>EditorState)=>void}
setState={setState as (callback:(p:LetInBlockState)=>ExprBlockState)=>void}
suggestionPriority={suggestionPriority}
/>;
case "lambda":
return <LambdaBlock
state={state}
setState={setState as (callback:(p:LambdaBlockState)=>EditorState)=>void}
setState={setState as (callback:(p:LambdaBlockState)=>ExprBlockState)=>void}
suggestionPriority={suggestionPriority}
/>;
}

2
src/InputBlock.tsx
View file

@ -6,7 +6,7 @@ import { EnvContext } from "./EnvContext";
import type { Dynamic, ResolvedType } from "./eval";
import "./InputBlock.css";
import { Type } from "./Type";
import type { State2Props } from "./Editor";
import type { State2Props } from "./ExprBlock";
import { autoInputWidth, focusNextElement, focusPrevElement, setRightMostCaretPosition } from "./util/dom_trickery";
import { attemptParseLiteral } from "./eval";

16
src/LambdaBlock.tsx
View file

@ -2,25 +2,23 @@ import { useContext, useEffect, useRef } from "react";
import { growEnv } from "dope2";
import { Editor, type EditorState, type State2Props } from "./Editor";
import { ExprBlock, type ExprBlockState, type State2Props } from "./ExprBlock";
import { EnvContext } from "./EnvContext";
import { evalEditorBlock, getUnusedTypeVar, type ResolvedType } from "./eval";
import { getUnusedTypeVar } from "./eval";
import { autoInputWidth } from "./util/dom_trickery";
import "./LambdaBlock.css";
export interface LambdaBlockState {
kind: "lambda";
paramName: string;
expr: EditorState;
expr: ExprBlockState;
}
interface LambdaBlockProps<
FnState=EditorState,
InputState=EditorState,
> extends State2Props<LambdaBlockState,EditorState> {}
FnState=ExprBlockState,
InputState=ExprBlockState,
> extends State2Props<LambdaBlockState,ExprBlockState> {}
export function LambdaBlock({state, setState, suggestionPriority}: LambdaBlockProps) {
@ -73,7 +71,7 @@ export function LambdaBlock({state, setState, suggestionPriority}: LambdaBlockPr
&nbsp;
<div className="lambdaInner">
<EnvContext value={innerEnv}>
<Editor
<ExprBlock
state={state.expr}
setState={setExpr}
onCancel={() => setState(state => state.expr)}

14
src/LetInBlock.tsx
View file

@ -1,9 +1,9 @@
import { useContext, useEffect, useRef } from "react";
import { Editor, type EditorState } from "./Editor";
import { ExprBlock, type ExprBlockState } from "./ExprBlock";
import { EnvContext } from "./EnvContext";
import { evalEditorBlock, makeInnerEnv, scoreResolved, type ResolvedType } from "./eval";
import { type State2Props } from "./Editor";
import { type State2Props } from "./ExprBlock";
import { autoInputWidth } from "./util/dom_trickery";
import { GlobalContext } from "./GlobalContext";
@ -12,11 +12,11 @@ import "./LetInBlock.css";
export interface LetInBlockState {
kind: "let";
name: string;
value: EditorState;
inner: EditorState;
value: ExprBlockState;
inner: ExprBlockState;
}
interface LetInBlockProps extends State2Props<LetInBlockState,EditorState> {}
interface LetInBlockProps extends State2Props<LetInBlockState,ExprBlockState> {}
export function LetInBlock(props: LetInBlockProps) {
return <span className="letIn">
@ -67,7 +67,7 @@ function DeclColumns({state: {name, value, inner}, setState, suggestionPriority}
</span>
<span className="keyword column">&nbsp;=&nbsp;</span>
<span className="column">
<Editor
<ExprBlock
state={value}
setState={setValue}
suggestionPriority={valueSuggestionPriority}
@ -105,7 +105,7 @@ function InnerMost({state, setState, suggestionPriority}) {
}
else {
return <EnvContext value={innerEnv}>
<Editor
<ExprBlock
state={state.inner}
setState={setInner}
suggestionPriority={suggestionPriority}

12
src/configurations.ts
View file

@ -1,13 +1,13 @@
import type { EditorState } from "./Editor";
import type { ExprBlockState } from "./ExprBlock";
export const initialEditorState: EditorState = {
export const initialEditorState: ExprBlockState = {
kind: "input",
text: "",
value: { kind: "text" },
focus: true,
};
export const nonEmptyEditorState: EditorState = {
export const nonEmptyEditorState: ExprBlockState = {
kind: "call",
fn: {
kind: "call",
@ -32,7 +32,7 @@ export const nonEmptyEditorState: EditorState = {
},
};
export const tripleFunctionCallEditorState: EditorState = {
export const tripleFunctionCallEditorState: ExprBlockState = {
kind: "call",
fn: {
kind: "call",
@ -75,7 +75,7 @@ export const tripleFunctionCallEditorState: EditorState = {
},
};
export const biggerExample: EditorState = {
export const biggerExample: ExprBlockState = {
"kind": "let",
"inner": {
"kind": "let",
@ -254,7 +254,7 @@ export const biggerExample: EditorState = {
}
};
export const lambda2Params: EditorState = {
export const lambda2Params: ExprBlockState = {
"kind": "let",
"inner": {
"kind": "input",

10
src/eval.ts
View file

@ -1,6 +1,6 @@
import { assignFnSubstitutions, dict, Double, fnType, getSymbol, growEnv, Int, NotAFunctionError, prettyT, substitute, symbolFunction, trie, TYPE_VARS, UnifyError } from "dope2";
import type { EditorState } from "./Editor";
import type { ExprBlockState } from "./ExprBlock";
import type { InputValueType, SuggestionType } from "./InputBlock";
interface Type {
@ -39,7 +39,7 @@ export const entirelyUnknown = env => ({
// the value of every block is either known (Dynamic), an error, or unknown
export type ResolvedType = Dynamic | DeepError | Unknown;
export const evalEditorBlock = (s: EditorState, env): ResolvedType => {
export const evalEditorBlock = (s: ExprBlockState, env): ResolvedType => {
if (s.kind === "input") {
return evalInputBlock(s.text, s.value, env);
}
@ -157,13 +157,13 @@ export function evalCallBlock2(fnResolved: ResolvedType, inputResolved: Resolved
}
}
export function evalCallBlock(fn: EditorState, input: EditorState, env): ResolvedType {
export function evalCallBlock(fn: ExprBlockState, input: ExprBlockState, env): ResolvedType {
const fnResolved = evalEditorBlock(fn, env);
const inputResolved = evalEditorBlock(input, env);
return evalCallBlock2(fnResolved, inputResolved, env);
}
export function evalLetInBlock(value: EditorState, name: string, inner: EditorState, env): ResolvedType {
export function evalLetInBlock(value: ExprBlockState, name: string, inner: ExprBlockState, env): ResolvedType {
const valueResolved = evalEditorBlock(value, env);
// console.log('eval', name, '...', valueResolved.kind, valueResolved.e);
// const innerEnv = growEnv(env)(name)(valueResolved);
@ -183,7 +183,7 @@ export function getUnusedTypeVar(env) {
return TYPE_VARS[getUnusedTypeVarIdx(env)];
}
export function evalLambdaBlock(paramName: string, expr: EditorState, env): ResolvedType {
export function evalLambdaBlock(paramName: string, expr: ExprBlockState, env): ResolvedType {
const paramType = getUnusedTypeVar(env);
// static env: we only know the name and the type
const staticInnerEnv = growEnv(env)(paramName)({