描述
Hi all,
Context: Try to implement this editor on Angular.
PS: The files that I will refer to are under 'node_modules/monaco-editor/dev'
I I've lost one day on this.
Problem Nº 1:
After importing this lib into Angular, the editor loaded normally. Then i wrote:
import * as http from 'http';
export function hello() { return "";}

I thought: Oh nice, it's recognize that I have to install node types. Then I clicked, nothing happen (Here I Go Again). Then after hours of investigating the editor's API, searching with the premise: "The MS software engineers must have designed the code with open-closed principle."
Conclusion: The registerCodeActionProvider kind worked, but will appear 3 actions (two of default system, and one that you added). Not acceptable!
Let's jump to Firefox debugger. The entity Action already comes without command, when you click on "Install type/node"
Where this object is created? I asked my self. After hours, I figure out, that the editor asks for suggestions to the tsWorker, the worker replies with the two semantic diagnostics (they have commands associated), then the editor, asks the tsModel to parse into actions (Here, is where the commands, emmited by the tsworker, are not even considered).
tsmodel.js L#1341
var action = {
title: codeFix.description,
edit: { edits: edits },
diagnostics: context.markers,
kind: 'quickfix',
};
My fix:
They do not use some random command assignment, so when you addCommand on editor's instance, the command ID is DYNAMIC_X
My quick fix for tsmodel.js L#1341
var action = {
title: codeFix.description,
edit: { edits: edits },
diagnostics: context.markers,
kind: 'quickfix',
};
// This is ugly
if(edits.length === 0) {
action.command = {
id:'DYNAMIC_1',
title:'myFix',
arguments:[context.markers, codeFix]
};
}
//codefix object
{
"fixName": "fixCannotFindModule",
"description": "Install '@types/node'",
"changes": [],
"commands": [
{
"type": "install package",
"file": "file:///main.ts",
"packageName": "@types/node"
}
]
}
This is NOT a fix, the currect fix would be: either they do not register this CodeActionAdaptor on the line 1495 of tsModel and force the API user to provide their own implementation, or invoke this implementation if the user does not provide with any, and emit a warning, so the developer could quickly understand why nothing happened. As is, is the worse of the two worlds, you cannot extend the current implementation.
Problem Nº 2:
import * as http from 'http';
import {Component} from '@angular/core'; // Example, was my 3 line after "resolving" the Nº1
export function hello() { return "";}

Well, this one was fast, because I already spend much time with source code.
tsWorker L#139702
return diagCode === errorCodeCannotFindModule
? (ts.JsTyping.nodeCoreModules.has(packageName) ? "@types/node" : undefined )
: (((_a = host.isKnownTypesPackageName) === null || _a === void 0 ? void 0 : _a.call(host, packageName)) ? ts.getTypesPackageName(packageName) : undefined);
My quick fix:
return diagCode === errorCodeCannotFindModule
? (ts.JsTyping.nodeCoreModules.has(packageName) ? "@types/node" : packageName )
: (((_a = host.isKnownTypesPackageName) === null || _a === void 0 ? void 0 : _a.call(host, packageName)) ? ts.getTypesPackageName(packageName) : undefined);

This was a long-short time story, I've tried other methods. Inclusive I considered the option of clone VSCode repo, but when I saw the clang requirement, i think: "What are the odds of that compiling seamless?"
I've tried the angular wrapper: ngstack/code-editor, but the the types are downloaded but no resolved properly by the editor, and the problem Nº1 remained. (As a user, I've clicked to install nothing happened!)
Hope that someone would improve this and thank you for making this code open-source.