feat: editor script's addEtraLib fn implemented

- webpack 5 raw loader implemted to fetch auto suggest script type definitions as string

package.json

@@ -131,7 +131,7 @@
     "react-file-drop": "^3.1.5"
   },
   "workspaces": [
-    "packages/**",
+    "packages/*",
     "./"
   ],
   "bugs": {

packages/firecamp-rest-executor/src/script-runner/types/request.ts

@@ -1,104 +1,101 @@
-import { EHttpMethod, IHeader, IRestBody, IUrl } from '@firecamp/types'
+import { EHttpMethod, IHeader, IRestBody, IUrl } from '@firecamp/types';
 
-/**
- * request instance
- */
+/** request instance */
 export interface IScriptRequest {
-    /**
-     * request URL
-     */
-    url: IUrl
+  /**
+   * request URL
+   */
+  url: IUrl;
 
-    /**
-     * request headers
-     */
-    headers: IHeader[]
+  /**
+   * request headers
+   */
+  headers: IHeader[];
 
-    /**
-     * HTTP method
-     */
-    method: EHttpMethod | string
+  /**
+   * HTTP method
+   */
+  method: EHttpMethod | string;
 
-    /**
-     * request body
-     */
-    body: IRestBody
+  /**
+   * request body
+   */
+  body: IRestBody;
 
-    /**
-     * add the new header or update the existing header
-     */
-    addHeader: (headerName: string, headerValue: string) => void
+  /**
+   * add the new header or update the existing header
+   */
+  addHeader: (headerName: string, headerValue: string) => void;
 
-    /**
-     * update the existing header
-     */
-    updateHeader: (headerName: string, headerValue: string) => void
+  /**
+   * update the existing header
+   */
+  updateHeader: (headerName: string, headerValue: string) => void;
 
-    /**
-     * return the header value
-     */
-    getHeader: (headerName: string) => string
+  /**
+   * return the header value
+   */
+  getHeader: (headerName: string) => string;
 
-    /**
-     * returns a js object, { [headerName]: headerValue,... } 
-     */
-    getHeaders: () => { [key: string]: string }
+  /**
+   * returns a js object, { [headerName]: headerValue,... }
+   */
+  getHeaders: () => { [key: string]: string };
 
-    /**
-     * remove the header
-     */
-    removeHeader: (...headerNames: string[]) => void
+  /**
+   * remove the header
+   */
+  removeHeader: (...headerNames: string[]) => void;
 
-    /**
-     * set the new query or update the existing query
-     */
-    addQueryParam: (queryName: string, queryValue: string) => void
+  /**
+   * set the new query or update the existing query
+   */
+  addQueryParam: (queryName: string, queryValue: string) => void;
 
-    /**
-     * update the existing query
-     */
-    updateQueryParam: (queryName: string, queryValue: string) => void
+  /**
+   * update the existing query
+   */
+  updateQueryParam: (queryName: string, queryValue: string) => void;
 
-    /**
-     * return the query value
-     */
-    getQueryParam: (queryName: string) => string | undefined
+  /**
+   * return the query value
+   */
+  getQueryParam: (queryName: string) => string | undefined;
 
-    /**
-     * remove the query
-     */
-    removeQueryParam: (...queryNames: string[]) => void
+  /**
+   * remove the query
+   */
+  removeQueryParam: (...queryNames: string[]) => void;
 
-    /**
-     * returns a js object, { [queryName]: queryValue,... } 
-     */
-    getQueries: () => { [key: string]: string }
+  /**
+   * returns a js object, { [queryName]: queryValue,... }
+   */
+  getQueries: () => { [key: string]: string };
 }
 
-
 export interface IRequestAssertions {
-    /**
-     * should have request URL same
-     */
-    url: (url: IUrl) => void
+  /**
+   * should have request URL same
+   */
+  url: (url: IUrl) => void;
 
-    /**
-     * should have request method same
-     */
-    method: (method: string) => void
+  /**
+   * should have request method same
+   */
+  method: (method: string) => void;
 
-    /**
-     * should have query
-     */
-    query: (queryName: string) => void
+  /**
+   * should have query
+   */
+  query: (queryName: string) => void;
 
-    /**
-     * should have header
-     */
-    header: (headerName: string) => void
+  /**
+   * should have header
+   */
+  header: (headerName: string) => void;
 
-    /**
-     * should have body set/have body of content type
-     */
-    body: (contentType?: string) => void
+  /**
+   * should have body set/have body of content type
+   */
+  body: (contentType?: string) => void;
 }

packages/ui-kit/src/components/editors/monaco-v2/Editor.interface.ts

@@ -25,6 +25,12 @@ export interface IEditor {
   /** monaco path */
   path?: string;
 
+  /** when lang is typescript then provide extra types for auto completion and preview comments */
+  addExtraLib?: {
+    typeDefinition: string;
+    path: string;
+  };
+
   /** monaco editor options */
   monacoOptions?: any;
 

packages/ui-kit/src/components/editors/monaco-v2/Editor.tsx

@@ -15,11 +15,7 @@ const Editor: FC<IEditor> = ({
   monacoOptions = {},
   height,
   path,
-  onChange = () => {}, // similar DOM event, e = { preventDefault, target }
-  onBlur,
-  onFocus,
-  onPaste,
-  onLoad = (editor) => {},
+  addExtraLib,
   // controlsConfig = {
   //   show: false,
   //   position: 'vertical',
@@ -27,6 +23,11 @@ const Editor: FC<IEditor> = ({
   // },
   placeholder = '',
   className = '',
+  onChange = () => {}, // similar DOM event, e = { preventDefault, target }
+  onBlur,
+  onFocus,
+  onPaste,
+  onLoad = (editor) => {},
   editorDidMount = null,
   onCtrlS = () => {},
   onCtrlShiftS = () => {},
@@ -193,10 +194,16 @@ const Editor: FC<IEditor> = ({
       // horizontal: "hidden",
       handleMouseWheel: true,
       useShadows: true,
-
       verticalScrollbarSize: 10,
       horizontalScrollbarSize: 5,
     },
+    suggest: {
+      showKeywords: false,
+      showVariables: true, // disables `undefined`, but also disables user-defined variables suggestions.
+      showModules: false, // disables `globalThis`, but also disables user-defined modules suggestions.
+    },
+    suggestOnTriggerCharacters: false,
+    wordBasedSuggestions: false,
     ...monacoOptions,
   };
 
@@ -227,6 +234,17 @@ const Editor: FC<IEditor> = ({
           })
         }
         onMount={(editor, monaco) => {
+          if (language == 'typescript') {
+            monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+              noLib: true,
+              allowNonTsExtensions: true,
+            });
+            monaco.languages.typescript.typescriptDefaults.addExtraLib(
+              addExtraLib.typeDefinition,
+              addExtraLib.path
+            );
+          }
+
           // https://www.anycodings.com/1questions/1773746/how-do-i-insert-text-into-a-monaco-editor
           editor.insertTextAtCurrentCursor = (text: any) => {
             let p = editor.getPosition();

packages/ui-kit/src/components/scripts/ScriptsTabs.tsx

@@ -1,16 +1,12 @@
 import { FC, useState, useMemo } from 'react';
-
-import {
-  Container,
-  SecondaryTab,
-  Checkbox,
-  Editor,
-} from '@firecamp/ui-kit';
+import { Container, SecondaryTab, Checkbox, Editor } from '@firecamp/ui-kit';
 import {
   preScriptSnippets,
   postScriptSnippets,
   testScriptSnippets,
 } from '@firecamp/rest-executor/dist/esm';
+//@ts-ignore
+import ScriptDefs from './interfaces/Scripts.d.txt?raw';
 
 import HelpPopUp from './HelpPopup';
 
@@ -209,13 +205,17 @@ const ScriptsTabs: FC<IScriptsTab> = ({
             autoFocus={true}
             id={`scripts-tab-${activeTab}-${id}`}
             value={scripts[activeTab] || ''}
-            language={'javascript'}
+            language={'typescript'}
             onLoad={(editor) => {
               setEditorDOM(editor);
             }}
             onChange={({ target: { value } }) =>
               onChangeScript(activeTab, value)
             }
+            addExtraLib={{
+              typeDefinition: ScriptDefs,
+              path: 'file:///node_modules/@firecamp/scripts/index.d.ts',
+            }}
           />
         </div>
         {/* )} */}

packages/ui-kit/src/components/scripts/interfaces/Scripts.d.txt

@@ -0,0 +1,73 @@
+interface IScriptRequest {
+  /**
+   * request URL
+   */
+  url: IUrl;
+
+  /**
+   * request headers
+   */
+  headers: IHeader[];
+
+  /**
+   * HTTP method
+   */
+  method: EHttpMethod | string;
+
+  /**
+   * request body
+   */
+  body: IRestBody;
+
+  /**
+   * add the new header or update the existing header
+   */
+  addHeader: (headerName: string, headerValue: string) => void;
+
+  /**
+   * update the existing header
+   */
+  updateHeader: (headerName: string, headerValue: string) => void;
+
+  /**
+   * return the header value
+   */
+  getHeader: (headerName: string) => string;
+
+  /**
+   * returns a js object, { [headerName]: headerValue,... }
+   */
+  getHeaders: () => { [key: string]: string };
+
+  /**
+   * remove the header
+   */
+  removeHeader: (...headerNames: string[]) => void;
+
+  /**
+   * set the new query or update the existing query
+   */
+  addQueryParam: (queryName: string, queryValue: string) => void;
+
+  /**
+   * update the existing query
+   */
+  updateQueryParam: (queryName: string, queryValue: string) => void;
+
+  /**
+   * return the query value
+   */
+  getQueryParam: (queryName: string) => string | undefined;
+
+  /**
+   * remove the query
+   */
+  removeQueryParam: (...queryNames: string[]) => void;
+
+  /**
+   * returns a js object, { [queryName]: queryValue,... }
+   */
+  getQueries: () => { [key: string]: string };
+}
+
+declare var request: IScriptRequest;

webpack.config.js

@@ -163,6 +163,10 @@ exports.rules = [
       'sass-loader', // compiles Sass to CSS
     ],
   },
+  {
+    resourceQuery: /raw/,
+    type: 'asset/source',
+  },
   {
     test: /\.(woff|woff2|eot|ttf|otf)$/i,
     type: 'asset/resource',