[monaco] As an extension developer I want to customize which modules are loaded from monaco

[kittaakos]

On the top of the modules we load, I want to load vs/base/common/comparers and make it available under the monaco namespace but as I see, I cannot use injection for the monaco-loader.

Feature Description:

[RomanNikitenko]

@kittaakos
I would like to load vs/base/common/comparers as well: #7899 (comment)

But I faced with the problem: Monaco loader did not bring comparers despite I added the corresponding items to Monaco loader here

[kittaakos]

But I faced with the problem: Monaco loader did not bring comparers despite I added the corresponding items to Monaco loader here

What did you do, @RomanNikitenko? It should work, I never had issues loading an additional monaco module before? Do you have a branch you can share? I want to look into it.

We could use comparers for the file-search too. If I remember correctly, we have a slight behavior mismatch between the VS Code and Theia file-search (Ctrl/Cmd+P) but I could not find the corresponding task/PR. Results were boosted differently. @vince-fugnitto, do you remember which PR was it?

[vince-fugnitto]

We could use comparers for the file-search too. If I remember correctly, we have a slight behavior mismatch between the VS Code and Theia file-search (Ctrl/Cmd+P) but I could not find the corresponding task/PR. Results were boosted differently. @vince-fugnitto, do you remember which PR was it?

Could it be the following issue? #7522

[kittaakos]

Could it be the following issue? #7522

Found it: #5638

[RomanNikitenko]

@kittaakos
I had the changes like https://github.com/eclipse-theia/theia/compare/monacoComparers?expand=1

and got the error:

Please let me know if I'm doing something wrong...

[kittaakos]

I had the changes like

I see what you're trying to do; your use-case is a bit different. It won't work for several reasons.

• compareEntries is not in the comparers module and
• it should be global.monaco.quickOpen = comparers

But I think we could achieve it with a small modification:

diff --git a/packages/monaco/src/browser/monaco-loader.ts b/packages/monaco/src/browser/monaco-loader.ts
index d3aeaf041..177dc535d 100644
--- a/packages/monaco/src/browser/monaco-loader.ts
+++ b/packages/monaco/src/browser/monaco-loader.ts
@@ -76,6 +76,7 @@ export function loadMonaco(vsRequire: any): Promise<void> {
                 'vs/platform/contextkey/common/contextkey',
                 'vs/platform/contextkey/browser/contextKeyService',
                 'vs/editor/common/model/wordHelper',
+                'vs/base/common/comparers',
                 'vs/base/common/errors'
             ], (commands: any, actions: any,
                 keybindingsRegistry: any, keybindingResolver: any, resolvedKeybinding: any, keybindingLabels: any,
@@ -89,6 +90,7 @@ export function loadMonaco(vsRequire: any): Promise<void> {
                 markerService: any,
                 contextKey: any, contextKeyService: any,
                 wordHelper: any,
+                comparers: any,
                 error: any) => {
                 const global: any = self;
                 global.monaco.commands = commands;
@@ -110,6 +112,7 @@ export function loadMonaco(vsRequire: any): Promise<void> {
                 global.monaco.contextKeyService = contextKeyService;
                 global.monaco.mime = mime;
                 global.monaco.wordHelper = wordHelper;
+                global.monaco.comparers = comparers;
                 global.monaco.error = error;
                 resolve();
             });
diff --git a/packages/monaco/src/browser/monaco-quick-open-service.ts b/packages/monaco/src/browser/monaco-quick-open-service.ts
index 7a150ec82..0eb775e0d 100644
--- a/packages/monaco/src/browser/monaco-quick-open-service.ts
+++ b/packages/monaco/src/browser/monaco-quick-open-service.ts
@@ -355,11 +355,31 @@ export class MonacoQuickOpenControllerOptsImpl implements MonacoQuickOpenControl
             }
         }
         if (this.options.fuzzySort) {
-            entries.sort((a, b) => monaco.quickOpen.compareEntries(a, b, lookFor));
+            entries.sort((a, b) => {
+                const normalizedQuery = lookFor.toLowerCase();
+                return this.compareEntries(a, b, normalizedQuery);
+            });
         }
         return new monaco.quickOpen.QuickOpenModel(entries, actionProvider ? new MonacoQuickOpenActionProvider(actionProvider) : undefined);
     }
 
+    protected compareEntries(elementA: monaco.quickOpen.QuickOpenEntry, elementB: monaco.quickOpen.QuickOpenEntry, lookFor: string): number {
+        const labelHighlightsA = elementA.getHighlights()[0] || [];
+        const labelHighlightsB = elementB.getHighlights()[0] || [];
+        if (labelHighlightsA.length && !labelHighlightsB.length) {
+            return -1;
+        }
+        if (!labelHighlightsA.length && labelHighlightsB.length) {
+            return 1;
+        }
+        if (labelHighlightsA.length === 0 && labelHighlightsB.length === 0) {
+            return 0;
+        }
+        const saneLabelA = (elementA.getLabel() || '').replace(/\r?\n/g, ' ');
+        const saneLabelB = (elementB.getLabel() || '').replace(/\r?\n/g, ' ');
+        return monaco.comparers.compareAnything(saneLabelA, saneLabelB, lookFor);
+    }
+
     getModel(lookFor: string): monaco.quickOpen.QuickOpenModel {
         throw new Error('getModel not supported!');
     }
diff --git a/packages/monaco/src/typings/monaco/index.d.ts b/packages/monaco/src/typings/monaco/index.d.ts
index a9e0b9451..762a57f5d 100644
--- a/packages/monaco/src/typings/monaco/index.d.ts
+++ b/packages/monaco/src/typings/monaco/index.d.ts
@@ -24,6 +24,11 @@ declare module monaco.instantiation {
     }
 }
 
+declare module monaco.comparers {
+    // https://github.com/theia-ide/vscode/blob/standalone/0.19.x/src/vs/base/common/comparers.ts#L125
+    export function compareAnything(one: string, other: string, lookFor: string): number;
+}
+
 declare module monaco.editor {
 
     export interface ICodeEditor {

I have not tried it though.

[RomanNikitenko]

compareEntries is not in the comparers module

compareEntries is not correct function for my case.

This one is correct, but it was removed.

So I tried to load comparers and :

• provide on Theia side logic to compare label highlights
• then use compareAnything function of VS Code

[RomanNikitenko]

@kittaakos
maybe you are confused by my goal and my changes here: https://github.com/eclipse-theia/theia/compare/monacoComparers?expand=1

There are only some part of my changes - I had a few minutes to do some draft to show how I tried to load the comparers and what problem I faced.
Sure I had additional logic to handle my case...

[kittaakos]

This one is correct, but it was removed.

This is getting a bit off-topic from the original issue: let's figure out why did the VS code guys remove it and what do they use now.

---

Update:
It was removed here: microsoft/vscode@5458ae7

compareEntries is not correct function for my case.

I still think this is the current VS Code way. 👆

[RomanNikitenko]

@kittaakos
thank you for your response!

This is getting a bit off-topic from the original issue

Agree, but I tried to avoid off-topic :-)
My test branch contains only changes related to the issue:

I would like to load vs/base/common/comparers, but I faced with the problem: Monaco loader did not bring comparers despite I added the corresponding items to Monaco loader here

I tried your patch and got the same error as described #8220 (comment)
I implemented something similar here #7899 (comment) and got the same result.

So, the problem with loading comparers is still actual for me.

Anyway @kittaakos thank you very much for your time you spent within my problem!

[akosyakov]

fyi I don't think we want to expose loader, since there is a likelihood that we switch to other way to consume Monaco for: #7261

[msujew]

With the way we are now consuming monaco (direct imports via ESM), I don't think this is relevant anymore.