From 4bae9938bfebc372d2a947c0aa47735230d2f589 Mon Sep 17 00:00:00 2001
From: catloversg <152669316+catloversg@users.noreply.github.com>
Date: Wed, 8 Jan 2025 13:17:30 +0700
Subject: [PATCH] BUGFIX: Editor shows "+1 overload" with all NS APIs (#1883)

---
 src/ScriptEditor/ScriptEditor.ts | 11 -----------
 src/ScriptEditor/ui/Editor.tsx   | 23 +++++++++++++++++++++++
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/ScriptEditor/ScriptEditor.ts b/src/ScriptEditor/ScriptEditor.ts
index 7a27ffd89..be397469e 100644
--- a/src/ScriptEditor/ScriptEditor.ts
+++ b/src/ScriptEditor/ScriptEditor.ts
@@ -3,12 +3,6 @@ import type { ContentFilePath } from "../Paths/ContentFile";
 import { EventEmitter } from "../utils/EventEmitter";
 import * as monaco from "monaco-editor";
 import { loadThemes, makeTheme, sanitizeTheme } from "./ui/themes";
-import netscriptDefinitions from "./NetscriptDefinitions.d.ts?raw";
-// We use a relative paths here to
-// - bypass the exports in @types/react's package.json
-// - to prevent typescript from complaining about importing a delcaration file.
-import reactTypes from "../../node_modules/@types/react/index.d.ts?raw";
-import reactDomTypes from "../../node_modules/@types/react-dom/index.d.ts?raw";
 import { Settings } from "../Settings/Settings";
 import { NetscriptExtra } from "../NetscriptFunctions/Extra";
 import * as enums from "../Enums";
@@ -67,15 +61,10 @@ export class ScriptEditor {
       loader.language.tokenizer.root.unshift([new RegExp("\\bthis\\b"), { token: "this" }]);
     })().catch((e) => exceptionAlert(e));
 
-    // Add ts definitions for API
-    const source = netscriptDefinitions.replace(/export /g, "");
     for (const [language, languageDefaults, getLanguageWorker] of [
       ["javascript", monaco.languages.typescript.javascriptDefaults, monaco.languages.typescript.getJavaScriptWorker],
       ["typescript", monaco.languages.typescript.typescriptDefaults, monaco.languages.typescript.getTypeScriptWorker],
     ] as const) {
-      languageDefaults.addExtraLib(source, "netscript.d.ts");
-      languageDefaults.addExtraLib(reactTypes, "react.d.ts");
-      languageDefaults.addExtraLib(reactDomTypes, "react-dom.d.ts");
       languageDefaults.setCompilerOptions({
         ...languageDefaults.getCompilerOptions(),
         // We allow direct importing of `.ts`/`.tsx` files, so tell the typescript language server that.
diff --git a/src/ScriptEditor/ui/Editor.tsx b/src/ScriptEditor/ui/Editor.tsx
index 7c69c2a89..ae28ac6c2 100644
--- a/src/ScriptEditor/ui/Editor.tsx
+++ b/src/ScriptEditor/ui/Editor.tsx
@@ -2,6 +2,15 @@ import React, { useEffect, useRef } from "react";
 
 import * as monaco from "monaco-editor";
 
+import netscriptDefinitions from "../NetscriptDefinitions.d.ts?raw";
+/**
+ * We use relative paths here to:
+ * - Bypass exports in @types/react's package.json
+ * - Prevent TypeScript from complaining about importing a declaration file.
+ */
+import reactTypes from "../../../node_modules/@types/react/index.d.ts?raw";
+import reactDomTypes from "../../../node_modules/@types/react-dom/index.d.ts?raw";
+
 import { useScriptEditorContext } from "./ScriptEditorContext";
 import { scriptEditor } from "../ScriptEditor";
 
@@ -26,6 +35,20 @@ export function Editor({ onMount, onChange, onUnmount }: EditorProps) {
     // Before initializing monaco editor
     scriptEditor.initialize();
 
+    /**
+     * Create models for NS API, React, and ReactDOM to make them work as extra libraries being available in the global
+     * scope. We can do this by calling languageDefaults.addExtraLib in src\ScriptEditor\ScriptEditor.ts. However,
+     * monaco editor has a bug that makes function definitions appear as duplicate ones. For more information, please
+     * check: https://github.com/microsoft/monaco-editor/issues/3580 and https://github.com/microsoft/monaco-editor/pull/4544.
+     */
+    monaco.editor.createModel(
+      netscriptDefinitions.replace(/export /g, ""),
+      "typescript",
+      monaco.Uri.file("netscript.d.ts"),
+    );
+    monaco.editor.createModel(reactTypes, "typescript", monaco.Uri.file("react.d.ts"));
+    monaco.editor.createModel(reactDomTypes, "typescript", monaco.Uri.file("react-dom.d.ts"));
+
     // Initialize monaco editor
     editorRef.current = monaco.editor.create(containerDiv.current, {
       value: "",