Upgrade to latest version of Typescript

package.json

@@ -149,7 +149,7 @@
                     "type": "boolean",
                     "default": false,
                     "description": "%deviceSimulatorExpressExtension.configuration.properties.previewMode%",
-                    "scope": "resource"    
+                    "scope": "resource"
                 }
             }
         },
@@ -286,7 +286,7 @@
         "tslint-microsoft-contrib": "^6.1.0",
         "tslint-react": "^3.6.0",
         "tslint-react-hooks": "^2.0.0",
-        "typescript": "^3.3.1",
+        "typescript": "^3.8.3",
         "typescript-react-intl": "^0.4.0",
         "version-from-git": "^1.1.1",
         "vsce": "^1.47.0",

src/extension.ts

@@ -599,7 +599,7 @@ export async function activate(context: vscode.ExtensionContext) {
                     // base_64 strings on UNIX systems.
 
                     // added any incomplete data to beginning
-                    let processedData = pythonProcessDataBuffer
+                    const processedData = pythonProcessDataBuffer
                         .join("")
                         .concat(dataFromTheProcess);
                     pythonProcessDataBuffer = [];

src/view/components/clue/ClueImage.tsx

@@ -10,7 +10,6 @@ import { ClueSvg, IRefObject } from "./Clue_svg";
 interface EventTriggers {
     onMouseUp: (event: Event, buttonKey: string) => void;
     onMouseDown: (event: Event, buttonKey: string) => void;
-    onMouseLeave: (event: Event, buttonKey: string) => void;
     onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void;
 }
 interface IProps {
@@ -42,15 +41,13 @@ export class ClueImage extends React.Component<IProps, {}> {
         }
     }
     componentDidUpdate() {
-        if (this.svgRef.current) {
-            if (this.context === VIEW_STATE.PAUSE) {
-                disableAllButtons(this.svgRef.current.getButtons());
-            } else if (this.context === VIEW_STATE.RUNNING) {
-                setupAllButtons(
-                    this.props.eventTriggers,
-                    this.svgRef.current.getButtons()
-                );
-            }
+        if (this.context === VIEW_STATE.PAUSE && this.svgRef.current) {
+            disableAllButtons(this.svgRef.current.getButtons());
+        } else if (this.context === VIEW_STATE.RUNNING && this.svgRef.current) {
+            setupAllButtons(
+                this.props.eventTriggers,
+                this.svgRef.current.getButtons()
+            );
         }
     }
     componentWillUnmount() {
@@ -89,24 +86,22 @@ export class ClueImage extends React.Component<IProps, {}> {
         );
     }
     public updateButtonAttributes(key: BUTTONS_KEYS, isActive: boolean) {
-        if (this.svgRef.current) {
-            const button = this.svgRef.current.getButtons()[key].current;
-            if (button) {
-                button.focus();
-                if (isActive) {
-                    button.children[0].setAttribute(
-                        "class",
-                        BUTTON_STYLING_CLASSES.KEYPRESSED
-                    );
-                } else {
-                    button.children[0].setAttribute(
-                        "class",
-                        BUTTON_STYLING_CLASSES.DEFAULT
-                    );
-                }
-                button.setAttribute("pressed", `${isActive}`);
-                button.setAttribute("aria-pressed", `${isActive}`);
+        const button = this.svgRef.current?.getButtons()[key].current;
+        if (button) {
+            button.focus();
+            if (isActive) {
+                button.children[0].setAttribute(
+                    "class",
+                    BUTTON_STYLING_CLASSES.KEYPRESSED
+                );
+            } else {
+                button.children[0].setAttribute(
+                    "class",
+                    BUTTON_STYLING_CLASSES.DEFAULT
+                );
             }
+            button.setAttribute("pressed", `${isActive}`);
+            button.setAttribute("aria-pressed", `${isActive}`);
         }
     }
 }
@@ -125,9 +120,7 @@ const setupButton = (
     buttonElement.onmouseup = e => {
         eventTriggers.onMouseUp(e, key);
     };
-    buttonElement.onmouseleave = e => {
-        eventTriggers.onMouseLeave(e, key);
-    };
+
     buttonElement.onkeydown = e => {
         // ensure that the keydown is enter,
         // or else it may register shortcuts twice
@@ -155,7 +148,6 @@ const disableAllButtons = (buttonRefs: IRefObject) => {
             // to implement
             ref.current.onmousedown = null;
             ref.current.onmouseup = null;
-            ref.current.onmouseleave = null;
             ref.current.onkeydown = null;
             ref.current.onkeyup = null;
             ref.current.setAttribute("class", BUTTON_CLASSNAME.DEACTIVATED);

src/view/components/clue/ClueSimulator.tsx

@@ -7,14 +7,14 @@ import {
     VIEW_STATE,
     WEBVIEW_MESSAGES,
 } from "../../constants";
+import { ViewStateContext } from "../../context";
+import "../../styles/Simulator.css";
 import "../../styles/Simulator.css";
 import PlayLogo from "../../svgs/play_svg";
 import StopLogo from "../../svgs/stop_svg";
 import { sendMessage } from "../../utils/MessageUtils";
 import ActionBar from "../simulator/ActionBar";
 import { BUTTONS_KEYS, ClueImage } from "./ClueImage";
-import "../../styles/Simulator.css";
-import { ViewStateContext } from "../../context";
 
 export const DEFAULT_CLUE_STATE: IClueState = {
     buttons: { button_a: false, button_b: false },
@@ -128,7 +128,6 @@ export class ClueSimulator extends React.Component<any, IState> {
                         eventTriggers={{
                             onMouseDown: this.onMouseDown,
                             onMouseUp: this.onMouseUp,
-                            onMouseLeave: this.onMouseLeave,
                             onKeyEvent: this.onKeyEvent,
                         }}
                         displayMessage={this.state.clue.displayMessage}
@@ -194,76 +193,67 @@ export class ClueSimulator extends React.Component<any, IState> {
             },
         });
     };
+
     protected onMouseUp = (event: Event, key: string) => {
         event.preventDefault();
         this.handleButtonClick(key, false);
     };
+
     protected onMouseDown = (event: Event, key: string) => {
         event.preventDefault();
         this.handleButtonClick(key, true);
     };
-    protected onMouseLeave = (event: Event, key: string) => {
-        event.preventDefault();
-        console.log(`To implement onMouseLeave ${key}`);
-    };
+
     protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) {
         event.stopPropagation();
         if (
             [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER) &&
             this.context === VIEW_STATE.RUNNING
         ) {
             this.handleButtonClick(key, active);
-            if (this.imageRef.current) {
-                if (key === BUTTONS_KEYS.BTN_A) {
-                    this.imageRef.current.updateButtonAttributes(
-                        BUTTONS_KEYS.BTN_A,
-                        active
-                    );
-                } else if (key === BUTTONS_KEYS.BTN_B) {
-                    this.imageRef.current.updateButtonAttributes(
-                        BUTTONS_KEYS.BTN_B,
-                        active
-                    );
-                } else if (key === BUTTONS_KEYS.BTN_AB) {
-                    this.imageRef.current.updateButtonAttributes(
-                        BUTTONS_KEYS.BTN_AB,
-                        active
-                    );
-                }
+            if (key === BUTTONS_KEYS.BTN_A) {
+                this.imageRef.current?.updateButtonAttributes(
+                    BUTTONS_KEYS.BTN_A,
+                    active
+                );
+            } else if (key === BUTTONS_KEYS.BTN_B) {
+                this.imageRef.current?.updateButtonAttributes(
+                    BUTTONS_KEYS.BTN_B,
+                    active
+                );
+            } else if (key === BUTTONS_KEYS.BTN_AB) {
+                this.imageRef.current?.updateButtonAttributes(
+                    BUTTONS_KEYS.BTN_AB,
+                    active
+                );
             }
         } else if (
             [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) &&
             this.context === VIEW_STATE.RUNNING
         ) {
             this.handleButtonClick(BUTTONS_KEYS.BTN_A, active);
-            if (this.imageRef.current) {
-                this.imageRef.current.updateButtonAttributes(
-                    BUTTONS_KEYS.BTN_A,
-                    active
-                );
-            }
+            this.imageRef.current?.updateButtonAttributes(
+                BUTTONS_KEYS.BTN_A,
+                active
+            );
         } else if (
             [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) &&
             this.context === VIEW_STATE.RUNNING
         ) {
             this.handleButtonClick(BUTTONS_KEYS.BTN_B, active);
-            if (this.imageRef.current) {
-                this.imageRef.current.updateButtonAttributes(
-                    BUTTONS_KEYS.BTN_B,
-                    active
-                );
-            }
+            this.imageRef.current?.updateButtonAttributes(
+                BUTTONS_KEYS.BTN_B,
+                active
+            );
         } else if (
             [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) &&
             this.context === VIEW_STATE.RUNNING
         ) {
             this.handleButtonClick(BUTTONS_KEYS.BTN_AB, active);
-            if (this.imageRef.current) {
-                this.imageRef.current.updateButtonAttributes(
-                    BUTTONS_KEYS.BTN_AB,
-                    active
-                );
-            }
+            this.imageRef.current?.updateButtonAttributes(
+                BUTTONS_KEYS.BTN_AB,
+                active
+            );
         } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) {
             this.togglePlayClick();
         } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) {

src/view/components/clue/Clue_svg.tsx

@@ -2,10 +2,10 @@
 // Licensed under the MIT license.
 
 import * as React from "react";
+import { CLUE_LEDS_COLORS, CONSTANTS } from "../../constants";
 import "../../styles/SimulatorSvg.css";
-import { DEFAULT_CLUE_STATE } from "./ClueSimulator";
-import { CONSTANTS, CLUE_LEDS_COLORS } from "../../constants";
 import svg from "../cpx/Svg_utils";
+import { DEFAULT_CLUE_STATE } from "./ClueSimulator";
 export interface IRefObject {
     [key: string]: React.RefObject<SVGRectElement>;
 }
@@ -1124,8 +1124,8 @@ export class ClueSvg extends React.Component<IProps, {}> {
     }
 
     private updateDisplay() {
-        if (this.displayRef.current && this.props.displayImage) {
-            this.displayRef.current.setAttribute(
+        if (this.props.displayImage) {
+            this.displayRef.current?.setAttribute(
                 "href",
                 `data:image/png;base64,${this.props.displayImage}`
             );
@@ -1140,52 +1140,45 @@ export class ClueSvg extends React.Component<IProps, {}> {
             (255 - neopixel[1]) * CONSTANTS.LED_TINT_FACTOR},${neopixel[2] +
             (255 - neopixel[2]) * CONSTANTS.LED_TINT_FACTOR})`;
 
-        if (this.ledsRefs.neopixel.current) {
-            this.ledsRefs.neopixel.current.setAttribute("fill", rgbColor);
-        }
-        if (this.gradientRefs.neopixel.current) {
-            if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) {
-                this.gradientRefs.neopixel.current.setAttribute(
-                    "stop-opacity",
-                    "0"
-                );
-            } else {
-                this.gradientRefs.neopixel.current.setAttribute(
-                    "stop-opacity",
-                    "1"
-                );
-            }
-            this.gradientRefs.neopixel.current.setAttribute(
-                "stop-color",
-                rgbColor
+        this.ledsRefs.neopixel.current?.setAttribute("fill", rgbColor);
+
+        if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) {
+            this.gradientRefs.neopixel.current?.setAttribute(
+                "stop-opacity",
+                "0"
+            );
+        } else {
+            this.gradientRefs.neopixel.current?.setAttribute(
+                "stop-opacity",
+                "1"
             );
         }
+        this.gradientRefs.neopixel.current?.setAttribute(
+            "stop-color",
+            rgbColor
+        );
     }
     private updateLeds() {
         // update white led
         const { isWhiteLedOn, isRedLedOn } = this.props.leds;
 
         this.ledsRefs.whiteLeds.map(
             (ledRef: React.RefObject<SVGRectElement>) => {
-                if (ledRef.current && this.gradientRefs.whiteLed.current) {
-                    svg.setLed(
-                        isWhiteLedOn,
-                        CLUE_LEDS_COLORS.WHITE_LEDS_OFF,
-                        CLUE_LEDS_COLORS.WHITE_LEDS_ON,
-                        ledRef.current,
-                        this.gradientRefs.whiteLed.current
-                    );
-                }
+                svg.setLed(
+                    isWhiteLedOn,
+                    CLUE_LEDS_COLORS.WHITE_LEDS_OFF,
+                    CLUE_LEDS_COLORS.WHITE_LEDS_ON,
+                    ledRef.current,
+                    this.gradientRefs.whiteLed.current
+                );
             }
         );
-        if (this.ledsRefs.redLed.current && this.gradientRefs.redLed.current) {
-            svg.setLed(
-                isRedLedOn,
-                CLUE_LEDS_COLORS.RED_LED_OFF,
-                CLUE_LEDS_COLORS.RED_LED_ON,
-                this.ledsRefs.redLed.current,
-                this.gradientRefs.redLed.current
-            );
-        }
+        svg.setLed(
+            isRedLedOn,
+            CLUE_LEDS_COLORS.RED_LED_OFF,
+            CLUE_LEDS_COLORS.RED_LED_ON,
+            this.ledsRefs.redLed.current,
+            this.gradientRefs.redLed.current
+        );
     }
 }

src/view/components/cpx/Svg_utils.tsx

@@ -82,15 +82,15 @@ namespace svg {
         ledStatus: boolean,
         offColor: string,
         onColor: string,
-        ledElement: SVGElement,
-        gradientStopElement: SVGStopElement
+        ledElement: SVGElement | null,
+        gradientStopElement: SVGStopElement | null
     ) {
         if (ledStatus) {
-            ledElement.setAttribute("fill", onColor);
-            gradientStopElement.setAttribute("stop-opacity", "1");
+            ledElement?.setAttribute("fill", onColor);
+            gradientStopElement?.setAttribute("stop-opacity", "1");
         } else {
-            ledElement.setAttribute("fill", offColor);
-            gradientStopElement.setAttribute("stop-opacity", "0");
+            ledElement?.setAttribute("fill", offColor);
+            gradientStopElement?.setAttribute("stop-opacity", "0");
         }
     }
 }