Multiple TS files for Find All references , Peek Definition

[jscsharp]

Is it possible to register multiple files , like file1.ts , file2.ts and files3.ts, then use "Peek Definition" or
"Find All references" commands in File1.ts and able to see the result from all the 3 files?
Currently, it works for loaded code in editor.
Obviously , I am asking to have similar functionality of VSCode.
Thanks

[jrieken]

That's something the standalone editor doesn't support and there are no plans to do so. It would require to introduce the notion of a project and to have access to arbitrary files of that project.

[pierogitus]

I was able to make this work across files with just a few hacks. First add all the files with both of these functions:

monaco.languages.typescript.typescriptDefaults.addExtraLib
monaco.editor.createModel

Then I hacked into the require function of the loader to monkey patch how the internals find the other file reference.

                var oldRequire = require
                function newRequire() {
                    if(arguments.length >= 2) {
                        if(arguments[0][0] == 'vs/editor/browser/standalone/simpleServices') {
                            var cb = arguments[1]
                            arguments[1] = function(m) {
                                m.SimpleEditorService.prototype.findModel = function(editor, data) {
                                    var mod = monaco.editor.getModel(data.resource);
                                    var s = (<any>new Error()).stack
                                    if(s.indexOf('openEditor') >= 0) {
                                        editor.setModel(mod)
                                    }
                                    return mod
                                };
                                if(cb) {
                                    cb(m)
                                }
                            }
                        }
                    }
                    oldRequire.apply(this, arguments)
                }
                newRequire['config'] = require.config
                newRequire['getConfig'] = require.getConfig
                newRequire['reset'] = require.reset
                newRequire['getBuildInfo'] = require.getBuildInfo
                newRequire['getStats'] = require.getStats
                require = newRequire

[jscsharp]

Great!, But I could not make it work. Do you have a working sample?
I added :

function xhr(url) {
var req = null;
return new monaco.Promise(function(c,e,p) {
req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req._canceled) { return; }

        if (req.readyState === 4) {
            if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
                c(req);
            } else {
                e(req);
            }
            req.onreadystatechange = function () { };
        } else {
            p(req);
        }
    };

    req.open("GET", url, true );
    req.responseType = "";

    req.send(null);
}, function () {
    req._canceled = true;
    req.abort();
});

xhr('file1.ts').then(function(res) {

  monaco.languages.typescript.javascriptDefaults.addExtraLib(
                       res.responseText, 'file1.ts');
       });

monaco.editor.createModel("file1.ts","typescript");

});

xhr('file2.ts').then(function(res) {

  monaco.languages.typescript.javascriptDefaults.addExtraLib(
                       res.responseText, 'file2.ts');
       });

monaco.editor.createModel("file2.ts","typescript");

});

[pierogitus]

It has to load all the files into addExtraLib first before createModel. Also your params on createModel are wrong.

setProject(infos: { [name: string]: string }) {
        for(var k in infos) {
            monaco.languages.typescript.typescriptDefaults.addExtraLib(infos[k], k)
        }
        for(var k in infos) {
            monaco.editor.createModel(infos[k], 'typescript', new monaco.Uri().with({ path: k }))
        }
    }

I'll be making my app public soon.

[jscsharp]

I got it partially working by adding :
new monaco.Uri().with(.....)
Now it shows the list of files in overlay result from "Find All References". But you cannot select the result files and navigate to them.

[pierogitus]

Check for errors. The default implementation crashes which is why that monkey patch above is needed.

[jscsharp]

I added the monkey patch in different places and added the breakpoint to it, but it seems, the code is never been called. I added your code at the end of loader.js and also in the page before calling this:

require.config({ paths: { 'vs': 'node_modules/monaco-editor/dev/vs' }});

Also, I added the code after " var RequireFunc = (function ... " line 1807 in loader.js, but I got some error.
where is the place of monkey patch?

[pierogitus]

Yes setup the patch before require.config then call require on the specific modules that need to be patched. Here's what I have right now as a React component.
https://gist.github.com/pierogitus/e5d68605c9f014e51dad0df47515b4d7

[jscsharp]

Thanks, I used the code, and now it breaks in "SimpleEditorService.prototype.findModel " patch.

It does not work yet, one of the error is :
[UriError]: If a URI does not contain an authority component, then the path cannot begin with two slash characters ("//").

[pierogitus]

Here's my full app http://run.primoca.com
Use the "fork this" link at the top to explore.

[jscsharp]

Great, I checked it without local ipfs.