Add typings for global.lab to Monaco Editor (#6393)

.changeset/stupid-candles-arrive.md

@@ -0,0 +1,5 @@
+---
+'hive': minor
+---
+
+Add type definitions of global.lab to Preflight Script editor

packages/web/app/src/lib/preflight-sandbox/graphiql-plugin.tsx

@@ -28,7 +28,7 @@ import { useToast } from '@/components/ui/use-toast';
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { useLocalStorage, useToggle } from '@/lib/hooks';
 import { GraphiQLPlugin } from '@graphiql/react';
-import { Editor as MonacoEditor, OnMount } from '@monaco-editor/react';
+import { Editor as MonacoEditor, OnMount, type Monaco } from '@monaco-editor/react';
 import {
   Cross2Icon,
   CrossCircledIcon,
@@ -39,6 +39,7 @@ import {
 } from '@radix-ui/react-icons';
 import { useParams } from '@tanstack/react-router';
 import { cn } from '../utils';
+import labApiDefinitionRaw from './lab-api-declaration?raw';
 import type { LogMessage } from './preflight-script-worker';
 import { IFrameEvents } from './shared-types';
 
@@ -568,6 +569,18 @@ function PreflightScriptModal({
   const handleEnvEditorDidMount: OnMount = useCallback(editor => {
     envEditorRef.current = editor;
   }, []);
+
+  const handleMonacoEditorBeforeMount = useCallback((monaco: Monaco) => {
+    // Add custom typings for globalThis
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(
+      `
+        ${labApiDefinitionRaw}
+        declare const lab: LabAPI;
+      `,
+      'global.d.ts',
+    );
+  }, []);
+
   const handleSubmit = useCallback(() => {
     onScriptValueChange(scriptEditorRef.current?.getValue() ?? '');
     onEnvValueChange(envEditorRef.current?.getValue() ?? '');
@@ -646,6 +659,7 @@ function PreflightScriptModal({
             </div>
             <MonacoEditor
               value={scriptValue}
+              beforeMount={handleMonacoEditorBeforeMount}
               onMount={handleScriptEditorDidMount}
               {...monacoProps.script}
               options={{

packages/web/app/src/lib/preflight-sandbox/lab-api-declaration.ts

@@ -0,0 +1,34 @@
+/* eslint-disable  @typescript-eslint/no-unused-vars */
+
+// The content of this file is used as a string
+// and feed into the context of the Monaco Editor and the Preflight Script.
+// The lack of `declare const lab: LabAPI` is intentional, to avoid messing up the global scope
+// of the web app codebase.
+// This could be a string in `graphiql-plugin.tsx`, but it's better to keep it in a separate file,
+// and use Prettier to format it, have syntax highlighting, etc.
+
+interface LabAPI {
+  /**
+   * [CryptoJS](https://cryptojs.gitbook.io/docs) library.
+   */
+  CryptoJS: any;
+  /**
+   * Use lab.environment API to store and retrieve data between requests
+   * or to pass values directly to HTTP headers for executed GraphQL requests.
+   */
+  environment: {
+    /**
+     * Returns the value of the environment variable with the given key.
+     */
+    get(key: string): unknown;
+    /**
+     * Sets the value of the environment variable with the given key.
+     */
+    set(key: string, value: unknown): void;
+  };
+  /**
+   * Mimics the \`prompt\` function in the browser, by sending a message to the main thread
+   * and waiting for a response.
+   */
+  prompt(message: string, defaultValue?: string): Promise<string>;
+}