Big react upgrade (#41)

src/expression/expression.test.ts

@@ -1,3 +1,4 @@
+import { OperationCanceledException } from "typescript";
 import { parser, ListOfNumbersExpression, BitwiseOperationExpression, NumericOperand, ExpressionOperand } from "./expression";
 
 describe("expression parser", () => {
@@ -21,11 +22,16 @@ describe("expression parser", () => {
         const second = result.expressionItems[1];
 
         expect(first).toBeInstanceOf(NumericOperand);
-        expect(first.value).toBe(1);
+
+        expect((first as NumericOperand).value).toBe(1);
 
         expect(second).toBeInstanceOf(ExpressionOperand);
-        expect(second.sign).toBe("^");
-        expect(second.operand.value).toBe(2);
+        var secondOp = second as ExpressionOperand;
+        expect(secondOp.sign).toBe("^");
+
+        expect(secondOp.operand).toBeInstanceOf(NumericOperand);
+        var childOp = secondOp.operand as NumericOperand;
+        expect(childOp.value).toBe(2);
     });
 
     it("bug", () => {       

src/index.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import reportWebVitals from './reportWebVitals';
 import cmd, { CommandInput } from './shell/cmd';
 import AppRoot from './shell/components/AppRoot';
 import log from 'loglevel';
-import React from 'react';
-import ReactDOM from 'react-dom';
 import './index.css';
 import networkingAppModule from './networking/module';
 import expressionAppModule from './expression/module';
@@ -10,13 +12,11 @@ import shellModule from './shell/module';
 import bootstrapAppData from './shell/startup';
 import UnknownInputResultView from './shell/components/UnknownInputResultView';
 
+
 const appData = bootstrapAppData();
 
 initializeModules();
 
-var root = <AppRoot appState={appData.appState} />;
-ReactDOM.render(root, document.getElementById('root'));
-
 executeStartupCommands();
 
 appData.appState.registerVisit();
@@ -40,5 +40,18 @@ function  initializeModules() {
     });
 }
 
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
 
 
+root.render(
+  <React.StrictMode>
+    <AppRoot appState={appData.appState} />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+//eportWebVitals();

src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

src/shell/cmd.test.ts

@@ -8,8 +8,8 @@ describe("CmdShell", () => {
             test2() { }
         };
 
-        spyOn(handler, "test1");
-        spyOn(handler, "test2");
+        jest.spyOn(handler, "test1");
+        jest.spyOn(handler, "test2");
 
         var sut = new CmdShell();
         sut.command("test1", handler.test1);
@@ -32,7 +32,7 @@ describe("CmdShell", () => {
             handle: function (input: string)  { }
         };
 
-        spyOn(handler, "handle");
+        jest.spyOn(handler, "handle");
 
         var sut = new CmdShell();
         sut.command(handler);

src/shell/cmd.ts

@@ -48,7 +48,7 @@ export class CmdShell {
                 try {
                     this.invokeHandler(input, handler, ops);
                 } catch (e) {
-                     this.handleError(input, e);
+                     this.handleError(input, e as Error);
                 }
             }
         }

src/shell/components/DisplayResultView.tsx

@@ -10,7 +10,8 @@ type DisplayResultProps = {
     input: string,
     resultKey: number,
     resultIndex: number,
-    onRemove?: (i: number) => void;
+    onRemove?: (i: number) => void,
+    children: JSX.Element
 }
 
 const DisplayResultView: React.FunctionComponent<DisplayResultProps> = (props) => {

src/shell/components/Toggle.tsx

@@ -6,7 +6,8 @@ export type ToggleProps = {
     isOn: boolean,
     title: string,
     elementId?: string
-    onClick: () => void
+    onClick: () => void,
+    children?: React.ReactNode
 };
 
 const Toggle: React.FunctionComponent<ToggleProps> = (props) => {

src/shell/module.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid';
+import {v4 as uuid} from 'uuid';
 import { sendAnalyticsEvent } from './analytics';
 import AppState from './AppState';
 import { CmdShell, CommandInput } from './cmd';