add example

src/component/app/App.tsx

@@ -6,7 +6,7 @@ import { ExprBlock, type ExprBlockState } from '../expr/ExprBlock';
 import { TypeInfoBlock } from '../other/Type';
 import { Value } from '../other/Value';
 import { actionShortcuts } from './actions';
-import { biggerExample, emptySet, factorial, higherOrder, higherOrder2Params, inc, initialEditorState, lambda2Params, nonEmptyEditorState, pushBool, setOfListOfBool, tripleFunctionCallEditorState } from "./configurations";
+import { biggerExample, dynamic, emptySet, factorial, higherOrder, higherOrder2Params, inc, initialEditorState, lambda2Params, nonEmptyEditorState, pushBool, setOfListOfBool, tripleFunctionCallEditorState } from "./configurations";
 import { extendedEnv } from './environment';
 
 import './App.css';
@@ -24,6 +24,7 @@ const examples: [string, ExprBlockState][] = [
   ["empty set"           , emptySet                     ],
   ["factorial"           , factorial                    ],
   ["set of list of bool" , setOfListOfBool              ],
+  ["dynamic"             , dynamic                      ],
 ];
 
 type AppState = {

src/component/app/configurations.ts

@@ -146,3 +146,5 @@ export const emptySet: ExprBlockState = {"kind":"call","fn":{"kind":"input","tex
 export const factorial: ExprBlockState = {"kind":"let","name":"factorial","focus":true,"value":{"kind":"lambda","paramName":"n","focus":true,"expr":{"kind":"call","fn":{"kind":"call","fn":{"kind":"call","fn":{"kind":"input","text":"leqZero","value":{"kind":"name"},"focus":false},"input":{"kind":"input","text":"n","value":{"kind":"name"},"focus":false}},"input":{"kind":"lambda","paramName":"_","focus":false,"expr":{"kind":"input","text":"1","value":{"kind":"literal","type":"Int"},"focus":false}}},"input":{"kind":"lambda","paramName":"_","focus":false,"expr":{"kind":"call","fn":{"kind":"call","fn":{"kind":"input","text":"mulInt","value":{"kind":"name"},"focus":false},"input":{"kind":"input","text":"n","value":{"kind":"name"},"focus":true}},"input":{"kind":"call","fn":{"kind":"input","text":"factorial","value":{"kind":"name"},"focus":true},"input":{"kind":"call","fn":{"kind":"call","fn":{"kind":"input","text":"addInt","value":{"kind":"name"},"focus":false},"input":{"kind":"input","text":"n","value":{"kind":"name"},"focus":false}},"input":{"kind":"input","text":"-1","value":{"kind":"literal","type":"Int"},"focus":false}}}}}}},"inner":{"kind":"call","fn":{"kind":"input","text":"factorial","value":{"kind":"name"}},"input":{"kind":"input","text":"5","value":{"kind":"literal","type":"Int"}}}};
 
 export const setOfListOfBool: ExprBlockState = {"kind":"call","fn":{"kind":"input","text":"set.emptySet","value":{"kind":"name"},"focus":false},"input":{"kind":"call","fn":{"kind":"input","text":"compareLists","value":{"kind":"name"}},"input":{"kind":"input","text":"compareDoubles","value":{"kind":"name"}}}};
+
+export const dynamic: ExprBlockState = {"kind":"call","fn":{"kind":"call","fn":{"kind":"input","text":"addInt","value":{"kind":"name"}},"input":{"kind":"call","fn":{"kind":"input","text":"getInst","value":{"kind":"name"}},"input":{"kind":"call","fn":{"kind":"call","fn":{"kind":"input","text":"newDynamic","value":{"kind":"name"}},"input":{"kind":"input","text":"52","value":{"kind":"literal","type":"Int"}}},"input":{"kind":"input","text":"Int","value":{"kind":"name"}}}}},"input":{"kind":"input","text":"1","value":{"kind":"literal","type":"Int"}}};

src/component/other/Value.css

@@ -21,3 +21,8 @@
 .valueUnknown {
   color: darkgrey;
 }
+
+.valueDynamic {
+  /* background-color: khaki; */
+  border: 1px solid grey;
+}

src/component/other/Value.tsx

@@ -1,4 +1,4 @@
-import {getType, getInst, getSymbol, Double, Int, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, eqType, match, getLeft, getRight, dict, Bool, set, Unit, symbolType, symbolUUID, getHumanReadableName, Ordering, isTypeVar} from "dope2";
+import {getType, getInst, getSymbol, Double, Int, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, eqType, match, getLeft, getRight, dict, Bool, set, Unit, symbolType, symbolUUID, getHumanReadableName, Ordering, isTypeVar, symbolDynamic} from "dope2";
 
 import "./Value.css";
 import { Type } from "./Type";
@@ -45,6 +45,8 @@ export function Value({dynamic}) {
       return <Type type={inst}/>;
     case symbolUUID:
       return <ValueUUID val={inst}/>
+    case symbolDynamic:
+      return <ValueDynamic val={inst}/>
     default:
       console.log("don't know how to show value:", dynamic);
       return <>don't know how to show value</>;
@@ -96,3 +98,9 @@ function ValueOrdering({val}) {
 export function ValueUnknown() {
   return <span className="valueUnknown">unknown</span>
 }
+function ValueDynamic({val}) {
+  return <span className="valueDynamic">
+    <Value dynamic={val}/>
+    ::<Type type={val.t}/>
+  </span>;
+}