kandev/apps/web/components/editors/monaco/monaco-loader.ts

import * as monacoImport from "monaco-editor";
import type { Monaco } from "@monaco-editor/react";
import type { IDisposable } from "monaco-editor";
import { loader } from "@monaco-editor/react";
import { isBuiltinTsSuppressed } from "./builtin-providers";

// Cast to Monaco type (from @monaco-editor/react) which has the full
// languages.typescript typings. The main 'monaco-editor' export marks
// languages.typescript as deprecated in favor of top-level typescript
// namespace, but @monaco-editor/react's Monaco type still uses it.
const monaco = monacoImport as unknown as Monaco;

// ---------------------------------------------------------------------------
// Built-in TS/JS provider suppression
// ---------------------------------------------------------------------------
// Monaco v0.55.1's setModeConfiguration fires onDidChange, but the
// tsMode.js setupMode() function never subscribes to it — providers are
// registered once and never torn down. So we intercept provider registration
// to wrap built-in TS/JS providers with a suppression flag check. When LSP
// is active, the wrappers return null/empty instead of calling the original.
//
// Key: we check `isBuiltinTsSuppressed()` at REGISTRATION time. If the flag
// is already true when a provider is registered, it means the LSP client is
// registering its own providers — those should NOT be wrapped. Only providers
// registered while the flag is false (Monaco's built-in ones) get wrapped.
// ---------------------------------------------------------------------------

const TS_LANGUAGES = new Set(["typescript", "javascript", "typescriptreact", "javascriptreact"]);

// Configure workers before Monaco initializes.
// The `new URL('...', import.meta.url)` pattern is recognized by Turbopack/webpack
// to bundle each worker as a separate chunk.
if (typeof window !== "undefined") {
  self.MonacoEnvironment = {
    getWorker(_workerId: string, label: string) {
      switch (label) {
        case "json":
          return new Worker(
            new URL("monaco-editor/esm/vs/language/json/json.worker.js", import.meta.url),
            { type: "module" },
          );
        case "css":
        case "scss":
        case "less":
          return new Worker(
            new URL("monaco-editor/esm/vs/language/css/css.worker.js", import.meta.url),
            { type: "module" },
          );
        case "html":
        case "handlebars":
        case "razor":
          return new Worker(
            new URL("monaco-editor/esm/vs/language/html/html.worker.js", import.meta.url),
            { type: "module" },
          );
        case "typescript":
        case "javascript":
          return new Worker(
            new URL("monaco-editor/esm/vs/language/typescript/ts.worker.js", import.meta.url),
            { type: "module" },
          );
        default:
          return new Worker(
            new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url),
            { type: "module" },
          );
      }
    },
  };

  // Tell @monaco-editor/react to use local monaco instance (no CDN fetch)
  loader.config({ monaco: monacoImport });

  // Expose on window for code that accesses window.monaco (e.g. keybindings in editor)
  (window as { monaco?: Monaco }).monaco = monaco;

  // Wrap built-in TS/JS provider registration so we can suppress them at call
  // time when an external LSP is active. This MUST happen before the first TS
  // model is created (which triggers the lazy tsMode setup), and since this
  // module runs at import time, it's guaranteed to be in place early enough.
  const langs = monacoImport.languages;

  type ProviderRegistrationFn = (
    selector: string,
    provider: Record<string, unknown>,
    ...rest: unknown[]
  ) => IDisposable;

  function wrapRegistration(
    original: ProviderRegistrationFn,
    methodName: string,
    emptyResult: unknown,
  ): ProviderRegistrationFn {
    return function (selector: string, provider: Record<string, unknown>, ...rest: unknown[]) {
      // Only wrap providers for TS/JS languages that are registered while
      // suppression is OFF (= Monaco's built-in providers). When suppression
      // is already ON at registration time, it means the LSP client is
      // registering its own providers — pass those through unwrapped.
      if (
        typeof selector === "string" &&
        TS_LANGUAGES.has(selector) &&
        typeof provider[methodName] === "function" &&
        !isBuiltinTsSuppressed()
      ) {
        const origMethod = (provider[methodName] as (...a: unknown[]) => unknown).bind(provider);
        const wrapped = Object.create(provider);
        wrapped[methodName] = function (...args: unknown[]) {
          if (isBuiltinTsSuppressed()) return emptyResult;
          return origMethod(...args);
        };
        return original.call(langs, selector, wrapped, ...rest);
      }
      return original.call(langs, selector, provider, ...rest);
    };
  }

  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- monkey-patching Monaco internals
  const l = langs as Record<string, any>;
  l.registerHoverProvider = wrapRegistration(
    l.registerHoverProvider.bind(langs),
    "provideHover",
    null,
  );
  l.registerCompletionItemProvider = wrapRegistration(
    l.registerCompletionItemProvider.bind(langs),
    "provideCompletionItems",
    { suggestions: [] },
  );
  l.registerSignatureHelpProvider = wrapRegistration(
    l.registerSignatureHelpProvider.bind(langs),
    "provideSignatureHelp",
    null,
  );
  l.registerDefinitionProvider = wrapRegistration(
    l.registerDefinitionProvider.bind(langs),
    "provideDefinition",
    null,
  );
  l.registerReferenceProvider = wrapRegistration(
    l.registerReferenceProvider.bind(langs),
    "provideReferences",
    null,
  );
  l.registerDocumentHighlightProvider = wrapRegistration(
    l.registerDocumentHighlightProvider.bind(langs),
    "provideDocumentHighlights",
    null,
  );
  l.registerCodeActionProvider = wrapRegistration(
    l.registerCodeActionProvider.bind(langs),
    "provideCodeActions",
    null,
  );
  l.registerRenameProvider = wrapRegistration(
    l.registerRenameProvider.bind(langs),
    "provideRenameEdits",
    null,
  );
  l.registerInlayHintsProvider = wrapRegistration(
    l.registerInlayHintsProvider.bind(langs),
    "provideInlayHints",
    null,
  );
}

export { monaco };