[Feature Request] Support intellisense for AMD modules

[manikantag]

Context

• This issue is not a bug report. (please use a different template for reporting a bug)
• This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

I want to support intellisense with in AMD modules (which are loaded using requirejs.). I created models for all the modules, but when I refer one of the module in another, I don't get any intellisense about the available properties/functions of the dependencies. For example, given:

dep1.js:

define("dep1", [], function () {
    return { foo: { bar: 123, aaa: 456 } } 
});

dep2.js:

define(['dep1'], function (dep1) {
    console.log(dep1.foo.bar);  // <----- I want to get auto completions from `dep1`
});

What would be the best way to achieve this? Is there a way I can specify the prototype of a variable word? I looked at 'Configure JavaScript defaults' playground example too.

I tried asking this question in StackOverFlow couple of weeks ago, but no luck.

Thanks.

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.1#XQAAAAKhAwAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscw4iApJ7XTDEjmw5QDdXTTvRJifGnKowyLpe43kaRSElIiG8w6DEgUzmuvsL0kjEjoFa5Br1HltYPAMn-clzdiMaA560R30IagT11lwDue0aRHVWq_aSw5zqf9Bxj5uUwxAP2_8fRS65Ve-lgxOC2AHiOKF2kNpWMPb52kgS4IVaGVU3Yprh7eqnzDFDyOb7lrfIJU8GcCWKpHK_og-BrC5ax7KK6xH-QtANBb5UddrQZhijk0eD0v3DElfEquYyzQwmO5JudaNAeJ9zzc_2GrO_bKtvF_p3yvt7FLIDkHE9RpXkgSiY1v1HalQEoqXuCxohw6sdYg3NLWZWQnVQYmiXav3EyO_WWfTbeVa1O2l4jwYEcaLdgUon_KuJX6YvIIu5A8ShNNED-Xu7EbMJs3OJfUhKmpIdpy59fYWJCtc7Z84_Za3NUXMmMylHwi4fx4Y-8maZZcfbZR5XT5NhpXAj3MTqV42_v2-iulHvqxEcafUcTwXZMbrvsGaW6EDuMjGhk2icJPDmNdP2h02gjc5O012pueYl6IRI2NlP_cGRHvVsmnqc33CsYoNQxJ_dxpIw

Monaco Editor Playground Code

monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2015,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.Classic,
    module: monaco.languages.typescript.ModuleKind.AMD,
    noEmit: true,
    esModuleInterop: true,
    strict: true,
    allowJs: true,
    isolatedModules: true, 
});

monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);

monaco.editor.createModel(
    'define("dep1", [], function () { return { foo: { bar: 123, aaa: 456 } } })',
    'javascript',
    monaco.Uri.parse(`inmemory:///mylib/dep1.js`)
);


const instance = monaco.editor.create(document.getElementById("container"), {
    language: 'javascript', 
    value: `define(['dep1'], function (dep1) {
    console.log(dep1.foo.bar);
});
`
});

[hediet]

I don't think is possible without significant effort.

Maybe you can achieve it by generating some d.ts files in the background.

[hediet]

We closed this issue because we don't plan to address it in the foreseeable future. If you disagree and feel that this issue is crucial: we are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding, and happy coding!

[manikantag]

I see, thanks for the update.

Is there a way to specify the prototype or type of a word, like !proto/!type in ternjs?.

I have a JavaScript Class with jsdoc. Now whenever user types this., I want to send the completions from the class prototype. Right now I'm sending the members from the class prototype using registerCompletionItemProvider(). This got 2 problems so far:

1. I need to show the Class prototype members for this. only at the top level, but not at any other nested function as this context could change by the way of function declaration.
2. I want to show the documentation which is present in the Class as jsdoc.

Related SO questions:

https://stackoverflow.com/questions/67505426/custom-javascript-code-completion-for-this-in-monaco-editor
https://stackoverflow.com/questions/43037243/provide-type-hints-to-monaco-editor

Can you please advice? Thanks

[manikantag]

Never mind... I figured it out... using declaration files I achieved 90% of my requirement: getting proper completions in AMD module with this context of chosen type.

For anyone else having same requirement: Monaco playground link

Main thing to notice is how this is declared to be a specific type in the declaration file which is fed to monaco as a extra lib.

monaco.languages.typescript.javascriptDefaults.addExtraLib(
    'declare function Factory (this: HTMLCanvasElement, n: Number) : void;',   // <----- change the `this` type to whatever you want
    'ts:this-lib.d.ts'
);

Best thing is I don't have to fiddle with the current line/word based logic anymore (and no custom provider is needed), leaving all it to language worker which is best at it 👍