Don't lose the isOperationInProgress state when the user switches tabs

Author: lerouxb

packages/browser-repl/package.json

@@ -35,7 +35,8 @@
     "depcheck": "depcheck",
     "compile": "tsc -p tsconfig.json",
     "prettier": "prettier",
-    "reformat": "npm run prettier -- --write . && npm run eslint --fix"
+    "reformat": "npm run prettier -- --write . && npm run eslint --fix",
+    "sync-to-compass": "node scripts/sync-to-compass.js"
   },
   "config": {
     "unsafe-perm": true

packages/browser-repl/scripts/sync-to-compass.js

@@ -0,0 +1,57 @@
+/* eslint-disable no-console */
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const child_process = require('child_process');
+const { debounce } = require('lodash');
+
+if (!process.env.COMPASS_HOME) {
+  throw new Error('Missing required environment variable $COMPASS_HOME.');
+}
+
+const packageDir = path.resolve(__dirname, '..');
+const srcDir = path.resolve(__dirname, '..', 'src');
+const libDir = path.resolve(__dirname, '..', 'lib');
+
+const destDir = path.dirname(
+  child_process.execFileSync(
+    'node',
+    ['-e', "console.log(require.resolve('@mongosh/browser-repl'))"],
+    { cwd: process.env.COMPASS_HOME, encoding: 'utf-8' }
+  )
+);
+
+console.log({ packageDir, srcDir, libDir, destDir });
+
+const compileAndCopy = debounce(
+  function () {
+    child_process.execFileSync('npm', ['run', 'compile'], { cwd: packageDir });
+    fs.cpSync(libDir, destDir, { recursive: true });
+    console.log('done.');
+  },
+  1_000,
+  {
+    leading: true,
+    trailing: true,
+  }
+);
+
+const srcWatcher = fs.watch(
+  srcDir,
+  { recursive: true },
+  function (eventType, filename) {
+    console.log(eventType, filename);
+    compileAndCopy();
+  }
+);
+
+function cleanup() {
+  srcWatcher.close();
+}
+
+for (const evt of ['SIGINT', 'SIGTERM']) {
+  process.on(evt, cleanup);
+}
+
+// do an initial copy on startup
+compileAndCopy();

packages/browser-repl/src/components/shell-input.tsx

@@ -110,10 +110,12 @@ export class ShellInput extends Component<ShellInputProps, ShellInputState> {
 
   private onEnter = async (): Promise<void> => {
     if (this.props.onInput) {
-      await this.props.onInput(this.state.currentValue);
+      const value = this.state.currentValue;
+      // clear the value before evaluating the input because it could take a
+      // long time
+      this.setState({ currentValue: '' });
+      await this.props.onInput(value);
     }
-
-    this.setState({ currentValue: '' });
   };
 
   render(): JSX.Element {

packages/browser-repl/src/components/shell.tsx

@@ -127,13 +127,17 @@ interface ShellProps {
    */
   initialHistory: readonly string[];
 
+  /**
+   * A boolean so we can keep the isOperationInProgress state between sessions.
+   */
+  isOperationInProgress?: boolean;
+
   darkMode?: boolean;
 
   className?: string;
 }
 
 interface ShellState {
-  operationInProgress: boolean;
   output: readonly ShellOutputEntry[];
   history: readonly string[];
   passwordPrompt: string;
@@ -153,14 +157,6 @@ const normalizeInitialEvaluate = (initialEvaluate: string | string[]) => {
   });
 };
 
-const isInitialEvaluateEmpty = (
-  initialEvaluate?: string | string[] | undefined
-) => {
-  return (
-    !initialEvaluate || normalizeInitialEvaluate(initialEvaluate).length === 0
-  );
-};
-
 /**
  * The browser-repl Shell component
  */
@@ -175,6 +171,7 @@ export class _Shell extends Component<ShellProps, ShellState> {
     initialInput: '',
     initialOutput: [],
     initialHistory: [],
+    isOperationInProgress: false,
   };
 
   private shellInputElement: HTMLElement | null = null;
@@ -183,7 +180,6 @@ export class _Shell extends Component<ShellProps, ShellState> {
   private onCancelPasswordPrompt: () => void = noop;
 
   readonly state: ShellState = {
-    operationInProgress: !isInitialEvaluateEmpty(this.props.initialEvaluate),
     output: this.props.initialOutput.slice(-this.props.maxOutputLength),
     history: this.props.initialHistory.slice(0, this.props.maxHistoryLength),
     passwordPrompt: '',
@@ -357,17 +353,16 @@ export class _Shell extends Component<ShellProps, ShellState> {
 
     let output = this.addEntriesToOutput([inputLine]);
     this.setState({
-      operationInProgress: true,
       output,
     });
     this.props.onOutputChanged(output);
 
+    // TODO: what if we switch away from the shell while this is ongoing?
     const outputLine = await this.evaluate(code);
 
     output = this.addEntriesToOutput([outputLine]);
     const history = this.addEntryToHistory(code);
     this.setState({
-      operationInProgress: false,
       output,
       history,
     });
@@ -411,7 +406,7 @@ export class _Shell extends Component<ShellProps, ShellState> {
 
   private onSigInt = (): Promise<boolean> => {
     if (
-      this.state.operationInProgress &&
+      this.props.isOperationInProgress &&
       (this.props.runtime as WorkerRuntime).interrupt
     ) {
       return (this.props.runtime as WorkerRuntime).interrupt();
@@ -440,7 +435,7 @@ export class _Shell extends Component<ShellProps, ShellState> {
         history={this.state.history}
         onClearCommand={this.onClearCommand}
         onInput={this.onInput}
-        operationInProgress={this.state.operationInProgress}
+        operationInProgress={this.props.isOperationInProgress}
         editorRef={this.setEditor}
         onSigInt={this.onSigInt}
       />