.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    open-pull-requests-limit: 10
+    schedule:
+      interval: "daily"

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "glide",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.13",
-    "@heroicons/react": "^2.0.16",
+    "@heroicons/react": "^2.0.18",
     "@monaco-editor/react": "^4.4.6",
-    "@reduxjs/toolkit": "^1.9.3",
+    "@reduxjs/toolkit": "^1.9.5",
     "immer": "^9.0.21",
     "localforage": "^1.10.0",
     "monaco-editor": "^0.36.1",
@@ -24,40 +24,40 @@
     "xterm": "^5.1.0",
     "xterm-addon-canvas": "^0.3.0",
     "xterm-addon-fit": "^0.7.0",
-    "xterm-addon-webgl": "^0.14.0"
+    "xterm-addon-webgl": "^0.15.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",
     "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.21.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@svgr/webpack": "^7.0.0",
     "@types/node": "^18.15.10",
-    "@types/react": "^18.0.30",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.0.11",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.2",
     "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
-    "cssnano": "^6.0.0",
-    "eslint": "^8.37.0",
+    "cssnano": "^6.0.1",
+    "eslint": "^8.48.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-webpack-plugin": "^4.0.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.0",
     "postcss": "^8.4.21",
-    "postcss-loader": "^7.1.0",
+    "postcss-loader": "^7.3.3",
     "prettier": "^2.8.7",
     "prettier-plugin-tailwindcss": "^0.2.5",
     "react-refresh": "^0.14.0",
     "style-loader": "^3.3.2",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
-    "webpack": "^5.76.3",
+    "webpack": "^5.88.2",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.13.1",
     "webpack-merge": "^5.8.0"

src/assets/console.py

@@ -2,6 +2,9 @@
 from pyodide.console import PyodideConsole, repr_shorten, BANNER
 import __main__
 import builtins
+import sys
+
+del sys.modules['js']
 
 async def await_fut(fut):
   result = await fut

src/components/Button.tsx

@@ -1,7 +1,7 @@
-import { ComponentProps, ElementType, SVGProps } from 'react';
+import { ComponentProps, ElementType } from 'react';
 
 interface ButtonProps extends ComponentProps<'button'> {
-  icon?: ElementType<SVGProps<SVGSVGElement>>;
+  icon?: ElementType;
 }
 
 const Button = (props: ButtonProps): JSX.Element => {

src/components/Item.tsx

@@ -1,7 +1,7 @@
-import { ComponentProps, ElementType, SVGProps } from 'react';
+import { ComponentProps, ElementType } from 'react';
 
 interface ItemProps extends ComponentProps<'div'> {
-  icon?: ElementType<SVGProps<SVGSVGElement>>;
+  icon?: ElementType;
   iconClassName?: string;
   labelClassName?: string;
   selected?: boolean;

src/components/Prompt.tsx

@@ -45,6 +45,9 @@ const Prompt = forwardRef<PromptRef, PromptProps>((props, ref): JSX.Element => {
 
         <input
           ref={inputRef}
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
           className="w-full bg-transparent py-2 pr-2 font-mono text-sm outline-none"
           onChange={(e) => {
             setCommand({ dirty: true, command: e.target.value });
@@ -76,6 +79,7 @@ const Prompt = forwardRef<PromptRef, PromptProps>((props, ref): JSX.Element => {
               setCommand({ dirty: false, command: history.next() ?? '' });
             }
           }}
+          spellCheck={false}
           value={command}
         />
       </div>

src/components/Terminal.tsx

@@ -5,8 +5,9 @@ import {
   useImperativeHandle,
   useLayoutEffect,
   useRef,
+  useState,
 } from 'react';
-import { StopIcon } from '@heroicons/react/24/outline';
+import { DocumentDuplicateIcon, StopIcon } from '@heroicons/react/24/outline';
 import { slate, yellow } from 'tailwindcss/colors';
 import { Terminal as Xterm } from 'xterm';
 import { CanvasAddon } from 'xterm-addon-canvas';
@@ -18,6 +19,11 @@ import Prompt from './Prompt';
 import TerminalMenu from './TerminalMenu';
 import 'xterm/css/xterm.css';
 
+interface Position {
+  x: number;
+  y: number;
+}
+
 interface TerminalRef {
   append: (result?: string) => void;
   write: (result?: string) => void;
@@ -64,6 +70,9 @@ const Terminal = forwardRef<TerminalRef, TerminalProps>(
     const containerRef = useRef<HTMLDivElement>(null);
     const promptRef = useRef<ComponentRef<typeof Prompt>>(null);
 
+    const [selection, setSelection] = useState<string>();
+    const [selectionPosition, setSelectionPosition] = useState<Position>();
+
     useLayoutEffect(() => {
       const container = containerRef.current;
       if (!container) return;
@@ -99,6 +108,8 @@ const Terminal = forwardRef<TerminalRef, TerminalProps>(
         xterm.loadAddon(new CanvasAddon());
       }
 
+      xterm.onSelectionChange(() => setSelection(xterm.getSelection()));
+
       xterm.onKey(({ key }) => {
         if (!(isASCIIPrintable(key) || key >= '\u00a0')) return;
 
@@ -142,9 +153,25 @@ const Terminal = forwardRef<TerminalRef, TerminalProps>(
         write('\u001b[33m' + (result ?? '') + '\u001b[0m'),
     }));
 
+    const copySelectionToClipboard = () => {
+      if (!selection) return;
+
+      navigator.clipboard.writeText(selection);
+    };
+
     return (
       <section ref={containerRef} className="relative h-full w-full">
-        <div ref={terminalRef} className="windowed h-full" />
+        <div
+          ref={terminalRef}
+          className="windowed h-full"
+          onMouseUp={(e) => {
+            const rectangle = e.currentTarget.getBoundingClientRect();
+            const x = e.clientX - rectangle.left;
+            const y = e.clientY - rectangle.top;
+
+            setSelectionPosition({ x, y });
+          }}
+        />
 
         <div className="absolute bottom-0 left-0 z-40 flex w-full space-x-2 px-2 pb-2">
           <Prompt
@@ -165,6 +192,23 @@ const Terminal = forwardRef<TerminalRef, TerminalProps>(
           />
         </div>
 
+        {selection && selectionPosition && (
+          <div
+            className="absolute z-20 opacity-20 hover:opacity-50"
+            style={{
+              left: selectionPosition.x + 5,
+              top: selectionPosition.y - 10,
+            }}
+          >
+            <Button
+              icon={DocumentDuplicateIcon}
+              onClick={copySelectionToClipboard}
+            >
+              Copy
+            </Button>
+          </div>
+        )}
+
         {props.showStopButton && (
           <div className="absolute right-3 top-3 z-20 space-x-2 opacity-50 hover:opacity-100">
             <Button icon={StopIcon} onClick={props.onStop}>

src/components/TerminalMenu.tsx

@@ -2,8 +2,7 @@ import {
   ElementType,
   Fragment,
   MouseEventHandler,
-  ReactNode,
-  SVGProps,
+  ReactNode
 } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import {
@@ -23,7 +22,7 @@ interface MenuItemProps {
   children: ReactNode;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   className?: string;
-  icon?: ElementType<SVGProps<SVGSVGElement>>;
+  icon?: ElementType;
   iconClassName?: string;
 }
 

src/workers/interpreter.worker.ts

@@ -77,6 +77,12 @@ const preparePyodide = async () => {
 
   if (interruptBuffer) pyodide.setInterruptBuffer(interruptBuffer);
 
+  /**
+   * Replaces Pyodide's `js` import with a stub `object`. This must also be
+   * paired with some `del sys.modules['js']` in Pyodide's initialisation.
+   */
+  pyodide.registerJsModule('js', {});
+
   const banner = setUpREPLEnvironment();
   post.writeln(banner);
   post.prompt(false);
@@ -100,6 +106,24 @@ const prepareExports = (exports?: { name: string; content: string }[]) => {
   });
 };
 
+/**
+ * Pyodide may sometimes not catch `RecursionError`s and excessively
+ * recursive code spills as JavaScript `RangeError`, causing Pyodide to
+ * fatally crash. We need to restart Pyodide in this case.
+ * @see https://github.com/pyodide/pyodide/issues/951
+ */
+const handleRangeErrorAndRestartPyodide = async (error: unknown) => {
+  if (!(error instanceof RangeError)) return;
+
+  post.system(
+    '\nOops, something happened and we have to restart the interpreter. ' +
+      "Don't worry, it's not your fault. " +
+      'You may continue once you see the prompt again.\n',
+  );
+
+  await preparePyodide();
+};
+
 const listeners = {
   initialize: async (newInterruptBuffer?: Uint8Array) => {
     pyodide ??= await preparePyodide();
@@ -132,25 +156,10 @@ const listeners = {
 
       post.writeln(result?.toString());
     } catch (error) {
-      if (error instanceof Error) {
-        post.error(error.message);
-      }
-
-      /**
-       * Pyodide may sometimes not catch `RecursionError`s and excessively
-       * recursive code spills as JavaScript `RangeError`, causing Pyodide to
-       * fatally crash. We need to restart Pyodide in this case.
-       * @see https://github.com/pyodide/pyodide/issues/951
-       */
-      if (error instanceof RangeError) {
-        post.system(
-          "\nOops, something happened and we have to restart the interpreter. Don't worry, it's not your fault. You may continue once you see the prompt again.\n",
-        );
-
-        await preparePyodide();
-      }
+      if (!(error instanceof Error)) throw error;
 
-      throw error;
+      post.error(error.message);
+      handleRangeErrorAndRestartPyodide(error);
     } finally {
       post.prompt();
       post.unlock();
@@ -209,6 +218,8 @@ const listeners = {
 
       const message = future.formatted_error || error.message;
       post.error(message.trimEnd());
+
+      handleRangeErrorAndRestartPyodide(error);
     } finally {
       post.prompt();
       future.destroy();