Update CI and ESLint configuration

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 100,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

devserver/.eslintrc.json

@@ -1,22 +1,24 @@
 {
   "root": true,
   "env": { "browser": true, "es2020": true },
-  "extends": [ "../.eslintrc.base.cjs" ],
+  "extends": ["../.eslintrc.base.cjs"],
   "ignorePatterns": ["dist", ".eslintrc.cjs"],
   "parser": "@typescript-eslint/parser",
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
     "func-style": 0,
     "no-empty-function": 0,
+
+    "@typescript-eslint/no-explicit-any": "off",
+    "no-unused-vars": "off", // disable base rule, as it can report incorrect errors
     "@typescript-eslint/no-unused-vars": [
-      1, // Was 2
+      "error",
       {
-        // vars: "all",
-        // args: "after-used",
-        // ignoreRestSiblings: false,
-        "argsIgnorePattern": "^_",
-        "caughtErrors": "all", // Was "none"
-        "caughtErrorsIgnorePattern": "^_"
+        "vars": "all",
+        "args": "none",
+        "ignoreRestSiblings": false,
+        "varsIgnorePattern": "^_",
+        "argsIgnorePattern": "^_"
       }
     ]
   }

devserver/src/components/ControlButton.tsx

@@ -1,5 +1,5 @@
-import { AnchorButton, Button, Icon, type IconName, Intent } from "@blueprintjs/core";
-import React from "react";
+import { AnchorButton, Button, Icon, Intent, type IconName } from '@blueprintjs/core';
+import React from 'react';
 
 type ButtonOptions = {
   className: string;
@@ -8,7 +8,7 @@ type ButtonOptions = {
   iconOnRight: boolean;
   intent: Intent;
   minimal: boolean;
-  type?: "submit" | "reset" | "button";
+  type?: 'submit' | 'reset' | 'button';
 };
 
 type ControlButtonProps = {
@@ -20,45 +20,45 @@ type ControlButtonProps = {
 };
 
 const defaultOptions = {
-	className: "",
-	fullWidth: false,
-	iconOnRight: false,
-	intent: Intent.NONE,
-	minimal: true
+  className: '',
+  fullWidth: false,
+  iconOnRight: false,
+  intent: Intent.NONE,
+  minimal: true
 };
 
 const ControlButton: React.FC<ControlButtonProps> = ({
-	label = "",
-	icon,
-	onClick,
-	options = {},
-	isDisabled = false
+  label = '',
+  icon,
+  onClick,
+  options = {},
+  isDisabled = false
 }) => {
-	const buttonOptions: ButtonOptions = {
-		...defaultOptions,
-		...options
-	};
-	const iconElement = icon && <Icon icon={icon} color={buttonOptions.iconColor} />;
-	// Refer to #2417 and #2422 for why we conditionally
-	// set the button component. See also:
-	// https://blueprintjs.com/docs/#core/components/button
-	const ButtonComponent = isDisabled ? AnchorButton : Button;
+  const buttonOptions: ButtonOptions = {
+    ...defaultOptions,
+    ...options
+  };
+  const iconElement = icon && <Icon icon={icon} color={buttonOptions.iconColor} />;
+  // Refer to #2417 and #2422 for why we conditionally
+  // set the button component. See also:
+  // https://blueprintjs.com/docs/#core/components/button
+  const ButtonComponent = isDisabled ? AnchorButton : Button;
 
-	return (
-		<ButtonComponent
-			disabled={isDisabled}
-			fill={buttonOptions.fullWidth}
-			intent={buttonOptions.intent}
-			minimal={buttonOptions.minimal}
-			className={buttonOptions.className}
-			type={buttonOptions.type}
-			onClick={onClick}
-			icon={!buttonOptions.iconOnRight && iconElement}
-			rightIcon={buttonOptions.iconOnRight && iconElement}
-		>
-			{label}
-		</ButtonComponent>
-	);
+  return (
+    <ButtonComponent
+      disabled={isDisabled}
+      fill={buttonOptions.fullWidth}
+      intent={buttonOptions.intent}
+      minimal={buttonOptions.minimal}
+      className={buttonOptions.className}
+      type={buttonOptions.type}
+      onClick={onClick}
+      icon={!buttonOptions.iconOnRight && iconElement}
+      rightIcon={buttonOptions.iconOnRight && iconElement}
+    >
+      {label}
+    </ButtonComponent>
+  );
 };
 
 export default ControlButton;

devserver/src/components/Playground.tsx

@@ -40,7 +40,7 @@
 	return tempContext;
 };
 
-const Playground: React.FC<{}> = () => {
+const Playground: React.FC = () => {
 	const [dynamicTabs, setDynamicTabs] = React.useState<SideContentTab[]>([]);
 	const [selectedTabId, setSelectedTab] = React.useState(testTabContent.id);
 	const [codeContext, setCodeContext] = React.useState<Context>(createContextHelper());
@@ -124,7 +124,7 @@
 						.then(() => showToast(evalSuccessToast));
 				}
 
 				// TODO: Add support for console.log?
 				if (result.status === "finished") {
 					setReplOutput({
 						type: "result",

devserver/src/components/Workspace.tsx

@@ -1,17 +1,17 @@
-import { FocusStyleManager } from "@blueprintjs/core";
-import { type Enable, Resizable, type ResizeCallback } from "re-resizable";
-import React from "react";
+import { FocusStyleManager } from '@blueprintjs/core';
+import { Resizable, type Enable, type ResizeCallback } from 're-resizable';
+import React from 'react';
 
-import ControlBar, { type ControlBarProps } from "./controlBar/ControlBar";
-import Editor from "./editor/Editor";
-import Repl, { type ReplProps } from "./repl/Repl";
-import SideContent, { type SideContentProps } from "./sideContent/SideContent";
-import { useDimensions } from "./utils/Hooks";
+import ControlBar, { type ControlBarProps } from './controlBar/ControlBar';
+import Editor from './editor/Editor';
+import Repl, { type ReplProps } from './repl/Repl';
+import SideContent, { type SideContentProps } from './sideContent/SideContent';
+import { useDimensions } from './utils/Hooks';
 
 type DispatchProps = {
   handleEditorEval: () => void;
-  handleEditorValueChange: (newValue: string) => void
-  handlePromptAutocomplete: (row: number, col: number, callback: any) => void
+  handleEditorValueChange: (newValue: string) => void;
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
 };
 
 type StateProps = {
@@ -21,9 +21,9 @@ type StateProps = {
   replProps: ReplProps;
   sideContentHeight?: number;
   sideContentIsResizeable?: boolean;
-  editorValue: string
+  editorValue: string;
 
-  sideContentProps: SideContentProps
+  sideContentProps: SideContentProps;
 };
 
 const rightResizeOnly: Enable = { right: true };
@@ -32,113 +32,110 @@ const bottomResizeOnly: Enable = { bottom: true };
 export type WorkspaceProps = DispatchProps & StateProps;
 
 const Workspace: React.FC<WorkspaceProps> = (props) => {
-	const contentContainerDiv = React.useRef<HTMLDivElement | null>(null);
-	const editorDividerDiv = React.useRef<HTMLDivElement | null>(null);
-	const leftParentResizable = React.useRef<Resizable | null>(null);
-	const maxDividerHeight = React.useRef<number | null>(null);
-	const sideDividerDiv = React.useRef<HTMLDivElement | null>(null);
+  const contentContainerDiv = React.useRef<HTMLDivElement | null>(null);
+  const editorDividerDiv = React.useRef<HTMLDivElement | null>(null);
+  const leftParentResizable = React.useRef<Resizable | null>(null);
+  const maxDividerHeight = React.useRef<number | null>(null);
+  const sideDividerDiv = React.useRef<HTMLDivElement | null>(null);
 
-	const [contentContainerWidth] = useDimensions(contentContainerDiv);
+  const [contentContainerWidth] = useDimensions(contentContainerDiv);
 
-	const [sideContentHeight, setSideContentHeight] = React.useState<number | undefined>(undefined);
+  const [sideContentHeight, setSideContentHeight] = React.useState<number | undefined>(undefined);
 
-	FocusStyleManager.onlyShowFocusOnTabs();
+  FocusStyleManager.onlyShowFocusOnTabs();
 
-	React.useEffect(() => {
-		if (props.sideContentIsResizeable && maxDividerHeight.current === null) {
-			maxDividerHeight.current = sideDividerDiv.current!.clientHeight;
-		}
-	});
+  React.useEffect(() => {
+    if (props.sideContentIsResizeable && maxDividerHeight.current === null) {
+      maxDividerHeight.current = sideDividerDiv.current!.clientHeight;
+    }
+  });
 
-	/**
+  /**
    * Snaps the left-parent resizable to 100% or 0% when percentage width goes
    * above 95% or below 5% respectively. Also changes the editor divider width
    * in the case of < 5%.
    */
-	const toggleEditorDividerDisplay: ResizeCallback = (_a, _b, ref) => {
-		const leftThreshold = 5;
-		const rightThreshold = 95;
-		const editorWidthPercentage
-      = ((ref as HTMLDivElement).clientWidth / contentContainerWidth) * 100;
-		// update resizable size
-		if (editorWidthPercentage > rightThreshold) {
+  const toggleEditorDividerDisplay: ResizeCallback = (_a, _b, ref) => {
+    const leftThreshold = 5;
+    const rightThreshold = 95;
+    const editorWidthPercentage =
+      ((ref as HTMLDivElement).clientWidth / contentContainerWidth) * 100;
+    // update resizable size
+    if (editorWidthPercentage > rightThreshold) {
       leftParentResizable.current!.updateSize({
-      	width: "100%",
-      	height: "100%"
+        width: '100%',
+        height: '100%'
       });
-		} else if (editorWidthPercentage < leftThreshold) {
+    } else if (editorWidthPercentage < leftThreshold) {
       leftParentResizable.current!.updateSize({
-      	width: "0%",
-      	height: "100%"
+        width: '0%',
+        height: '100%'
       });
-		}
-	};
+    }
+  };
 
-	/**
+  /**
    * Hides the side-content-divider div when side-content is resized downwards
    * so that it's bottom border snaps flush with editor's bottom border
    */
-	const toggleDividerDisplay: ResizeCallback = (_a, _b, ref) => {
-		maxDividerHeight.current
-      = sideDividerDiv.current!.clientHeight > maxDividerHeight.current!
-      	? sideDividerDiv.current!.clientHeight
-      	: maxDividerHeight.current;
-		const resizableHeight = (ref as HTMLDivElement).clientHeight;
-		const rightParentHeight = (ref.parentNode as HTMLDivElement).clientHeight;
-		if (resizableHeight + maxDividerHeight.current! + 2 > rightParentHeight) {
-      sideDividerDiv.current!.style.display = "none";
-		} else {
-      sideDividerDiv.current!.style.display = "initial";
-		}
-	};
+  const toggleDividerDisplay: ResizeCallback = (_a, _b, ref) => {
+    maxDividerHeight.current =
+      sideDividerDiv.current!.clientHeight > maxDividerHeight.current!
+        ? sideDividerDiv.current!.clientHeight
+        : maxDividerHeight.current;
+    const resizableHeight = (ref as HTMLDivElement).clientHeight;
+    const rightParentHeight = (ref.parentNode as HTMLDivElement).clientHeight;
+    if (resizableHeight + maxDividerHeight.current! + 2 > rightParentHeight) {
+      sideDividerDiv.current!.style.display = 'none';
+    } else {
+      sideDividerDiv.current!.style.display = 'initial';
+    }
+  };
 
-	return (
-		<div className="workspace">
-			<ControlBar {...props.controlBarProps} />
-			<div className="workspace-parent">
-				<div className="row content-parent" ref={contentContainerDiv}>
-					<div className="editor-divider" ref={editorDividerDiv} />
-					<Resizable
-						className="resize-editor left-parent"
-						enable={rightResizeOnly}
-						minWidth={0}
-						onResize={toggleEditorDividerDisplay}
-						ref={leftParentResizable}
-						defaultSize={{
-							width: "50%",
-							height: "100%"
-						}}
-						as={undefined as any} // re-resizable bug - wrong typedef
-					>
-						<Editor
-							handleEditorValueChange={props.handleEditorValueChange}
-							handleEditorEval={props.handleEditorEval}
-							handleDeclarationNavigate={() => {}}
-							handlePromptAutocomplete={props.handlePromptAutocomplete}
-							handleSendReplInputToOutput={() => {}}
-							editorValue={props.editorValue}
-						/>
-					</Resizable>
-					<div className="right-parent">
-						<Resizable
-							bounds="parent"
-							className="resize-side-content"
-							enable={bottomResizeOnly}
-							onResize={toggleDividerDisplay}
-							onResizeStop={(_a, _b, ref) => setSideContentHeight(ref.clientHeight)}
-						>
-							<SideContent
-								sideContentHeight={sideContentHeight}
-								{...props.sideContentProps}
-							/>
-							<div className="side-content-divider" ref={sideDividerDiv} />
-						</Resizable>
-						<Repl {...props.replProps} />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="workspace">
+      <ControlBar {...props.controlBarProps} />
+      <div className="workspace-parent">
+        <div className="row content-parent" ref={contentContainerDiv}>
+          <div className="editor-divider" ref={editorDividerDiv} />
+          <Resizable
+            className="resize-editor left-parent"
+            enable={rightResizeOnly}
+            minWidth={0}
+            onResize={toggleEditorDividerDisplay}
+            ref={leftParentResizable}
+            defaultSize={{
+              width: '50%',
+              height: '100%'
+            }}
+            as={undefined as any} // re-resizable bug - wrong typedef
+          >
+            <Editor
+              handleEditorValueChange={props.handleEditorValueChange}
+              handleEditorEval={props.handleEditorEval}
+              handleDeclarationNavigate={() => {}}
+              handlePromptAutocomplete={props.handlePromptAutocomplete}
+              handleSendReplInputToOutput={() => {}}
+              editorValue={props.editorValue}
+            />
+          </Resizable>
+          <div className="right-parent">
+            <Resizable
+              bounds="parent"
+              className="resize-side-content"
+              enable={bottomResizeOnly}
+              onResize={toggleDividerDisplay}
+              onResizeStop={(_a, _b, ref) => setSideContentHeight(ref.clientHeight)}
+            >
+              <SideContent sideContentHeight={sideContentHeight} {...props.sideContentProps} />
+              <div className="side-content-divider" ref={sideDividerDiv} />
+            </Resizable>
+            <Repl {...props.replProps} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Workspace;